La coutume de la directive (comme ng-repeat)

J'ai essayé beaucoup de choses différentes à résoudre les problèmes de performance de ng-repeat.
y compris des trucs décrit ici: Comment unwatch " une expression

J'ai besoin d'avoir un grand nombre de lignes sur la page jusqu'à ~1000 lignes. Avec chaque ligne contenant un peu de stuff. Et il me semble maintenant, c'est juste serait très lent avec ng-repeat, je suppose que je dois créer mon propre ng-repeat ou je dois construire une directive qui va construire chaque ligne de la table... je ne sais pas comment faire. Pouvez-vous les gars m'aider s'il vous plaît. Pouvez-vous me montrer quelques exemples.

fourni un exemple de directive dans le lien que vous avez mentionné. Essayez et laissez-nous savoir ce qui ne marche pas.
découvrez ma réponse ci-dessous, j'ai créé un jeu de répétition qui parcourt un ensemble de données une fois et de ne pas ajouter de surveillance des auditeurs à la page. Je l'utilise dans mon application, afin de surmonter les problèmes de mémoire ainsi.

OriginalL'auteur iLemming | 2013-01-30

  1. 11

    Voici un exemple de remplissage d'un <dl> <dt>s et <dd>s
    ...

    De l'étape 01 - créer un widge.product.details.js

    //se lie à $champ d'application.détails = [] //tableau d'objet

    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>') );
        });
    });
}

    Étape 02 - créer votre html

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

    Étape 03 - créer un app.product.js

    function ProductInfoCtrl($scope) {
 $scope.details = [
                   {dt:'condition',dd:'brand new'},
                   {dt:'year bought',dd:'3 years ago'},
                   ]
}
    Avec votre forEach() boucle ne serait-il pas préférable pour les performances, de le stocker dans une chaîne de caractères, puis effectuez l'une append() après la forEach()?
    peut-être, sonne comme une bonne idée. j'ai confiance dans une référence... 😀
    Pour info: en Utilisant la compilation { post: .. } est le même que d'utiliser link: function(champ d'application, éléments, attributs)

    OriginalL'auteur Noypi Gilas

  2. 4
    angular.module('setRepeat',[]).directive('setRepeat', function () {
return {
transclude: 'element',
priority: 1000,
compile: compileFun
};
function compileFun(element, attrs, linker) {
var expression = attrs.setRepeat.split(' in ');
expression = {
child : expression[0],
property : expression[1]
};
return {
post: repeat
};
function repeat(scope, iele, iattrs /*, attr*/) {
var template = element[0].outerHTML;
var data = scope.$eval(expression.property);
addElements(data,scope,iele);
return;
function makeNewScope (index, expression, value, scope, collection) {
var childScope = scope.$new();
childScope[expression] = value;
childScope.$index = index;
childScope.$first = (index === 0);
childScope.$last = (index === (collection.length - 1));
childScope.$middle = !(childScope.$first || childScope.$last);
/**
*
* uncomment this if you want your children to keep listening for changes
*
**/
//childScope.$watch(function updateChildScopeItem(){
//childScope[expression] = value;
//});
return childScope;
}
function addElements (collection, scope, insPoint) {
var frag = document.createDocumentFragment();
var newElements = [], element, idx, childScope;
angular.forEach(data, function(v,i){
childScope = makeNewScope(i,expression.child,v,scope,collection);
element = linker(childScope, angular.noop);
newElements.push(element);
frag.appendChild(element[0]);
});
insPoint.after(frag);
return newElements;
}
}
}
});
    Salut, comment définissez-vous une montre pour le setRepeat expression? Je veux dire comment mettre à jour les enfants lors de la property changements?
    c'est le point entier de ce qu'il ne change pas... si seulement l'utiliser sur des trucs qui n'ont pas besoin d'être mis à jour. Aussi pour info l'angulaire de l'équipe a enfin énuméré et a créé une liaison une fois la syntaxe de sorte que vous n'avez pas vraiment besoin de plus. Vous pouvez maintenant faire ng-repeat="item dans ::la liste" et il va lier le répéter encore une fois et arrêter l'écoute
    ah bon.. vous avez raison! En fait, je suis tombé sur cette question à partir de Google et je cherchais un moyen de créer un personnalisé ng-repeat (pour utiliser dans mon propre datatables l'instar de la directive). De toute façon, merci pour la clarification.

    OriginalL'auteur btm1

  3. 0

    Simple code personnalisé ngReapeat directive dans 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>

    Code 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'}
];
}

    OriginalL'auteur suryadev