Пользовательская директива (например, ng-repeat)

Я пробовал много разных вещей, чтобы исправить проблемы с производительностью ng-repeat. включая материал, описанный здесь: Как "отключить" выражение

Мне нужно иметь большой набор строк на странице до ~ 1000 строк. Каждый ряд содержит довольно много материала. И теперь мне кажется, что это было бы очень медленно с ng-repeat, я думаю, мне нужно построить либо свой собственный ng-repeat, либо мне нужно создать директиву, которая будет строить каждую строку в таблице... Я не знать, как сделать либо. Не могли бы вы, ребята, помочь мне, пожалуйста. Можете ли вы показать мне несколько примеров.


angularjs ng-repeat
person iLemming    schedule 30.01.2013    source источник
comment
@blesh предоставил пример директивы в упомянутой вами ссылке. Попробуйте это и дайте нам знать, что не работает.   -  person Mark Rajcok    schedule 31.01.2013
comment
посмотрите мой ответ ниже. Я создал set-repeat, который повторяет набор данных один раз и не добавляет прослушивателей на страницу. Я использую его в своем приложении, чтобы преодолеть проблемы с памятью.   -  person btm1    schedule 13.10.2013

Ответы (3)


arrow_upward
11
arrow_downward

Вот пример заполнения ‹dl› с ‹dt›s и ‹dd›s...

Шаг 01 — создайте widge.product.details.js

// привязывается к $scope.details = [] //объект массива

angular.module('widget.product.details',[])
  .directive('productDetails',function(){
   return {
    template:'<dl class="dl-horizontal"></dl>',
    replace:true,
    restrict:'E',
    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>') );
        });
    });
}

Шаг 02 - создайте свой html

<div class="span7" ng-controller="ProductInfoCtrl">
 <product-details></product-details>
</div>

Шаг 03 — создайте app.product.js

function ProductInfoCtrl($scope) {
 $scope.details = [
                   {dt:'condition',dd:'brand new'},
                   {dt:'year bought',dd:'3 years ago'},
                   ]
}
person Noypi Gilas    schedule 02.02.2013
comment
С вашим циклом forEach() не было бы лучше для производительности сохранить все это в строке, а затем выполнить один append() после forEach()? - person Pete; 18.11.2013
comment
возможно, звучит как хорошая идея. я бы доверился эталону... :D - person Noypi Gilas; 05.12.2013
comment
К вашему сведению: использование compile { post: .. } аналогично использованию link: function (область, элемент, атрибуты) - person Daniel Macias; 08.02.2015

arrow_upward
0
arrow_downward

Простой код для пользовательской директивы ngReapeat в angularJS:

   <!DOCTYPE html>
   <html>
    <head>
       <script type='text/javascript' src='angular.min.js'></script>    
    </head>
    <body ng-app="customNgReapeat">
      <div ng-controller='ProductInfoCtrl'>
        <div custom-repeat></div>
      </div>    
    </body>
  </html>

JS-код

    var csREapeat = angular.module('customNgReapeat', [])
      .directive('customRepeat', function() {
        return {
          restrict: 'A',
          link: function(scope, iElement, iAttrs, controller) {
            angular.forEach(scope.details, function(v, k) {
              iElement.append(angular.element('<div>' + v.name + '</div>             <div>' + v.address + '</div>'));
            });
          }
        };
      })

 function ProductInfoCtrl($scope) {
   $scope.details = [
      {name: 'Nidhi', address: 'India-Gurgaon'},
      {name: 'Khushi', address: 'India-Ghazipur'}
   ];
}
person suryadev    schedule 25.12.2015

arrow_upward

arrow_downward

person    schedule
comment
Привет, как вы устанавливаете часы для выражения setRepeat? Я имею в виду, как обновить дочерние элементы при изменении property? - person supersan; 11.02.2016
comment
@supersan в этом весь смысл, что он не меняется ... так что используйте это только для вещей, которые не нужно обновлять. Кроме того, к вашему сведению, команда angular наконец-то перечислила и создала синтаксис привязки один раз, так что вам это больше не нужно. Теперь вы можете сделать ng-repeat=item в ::list, и он свяжет повтор один раз и перестанет слушать - person btm1; 11.02.2016
comment
о хорошо.. ты прав! На самом деле я наткнулся на этот вопрос от Google, и я искал способ создать собственный ng-repeat (для использования в моих собственных таблицах данных, таких как директива). В любом случае, спасибо за разъяснение. - person supersan; 12.02.2016