Agzam Agzam - 4 months ago 22x
AngularJS Question

Custom directive (like ng-repeat)

I've tried many different things to fix performance issues of

including stuff described here: How to 'unwatch' an expression

I need to have a large set of rows on the page up to ~1000 rows. With every row containing quite a bit of stuff. And it seems to me now, it's just would be very slow with
, I guess I have to build either my own custom
or I have to build a directive that will build every single row in the table... I don't know how to do either. Can you guys help me please. Can you show me some examples.


Here is an example of populating a <dl> with <dt>s and <dd>s ...

Step 01 - create a widge.product.details.js

// binds to $scope.details = [] //array object

   return {
    template:'<dl class="dl-horizontal"></dl>',
    compile : function compile(tElement, tAttrs, transclude) {
     return {
      post: createProductDetails

var createProductDetails = function (scope, iElement, iAttrs, controller) {
    scope.$watch('details', function(newVal, oldVal) {
    angular.forEach(newVal, function(v,k){
        iElement.append( angular.element('<dt>'+v.dt+'</dt><dd>'+v.dd+'</dd>') );

Step 02 - create your html

<div class="span7" ng-controller="ProductInfoCtrl">

Step 03 - create a app.product.js

function ProductInfoCtrl($scope) {
 $scope.details = [
                   {dt:'condition',dd:'brand new'},
                   {dt:'year bought',dd:'3 years ago'},