J'ai essayé de nombreuses choses différentes pour résoudre les problèmes de performance de Je dois avoir un grand ensemble de lignes sur la page jusqu'à ~ 1000 rangées. Avec chaque rangée contenant un peu de choses. Et il me semble maintenant, il s'agirait tout simplement d'être très lent avec ng-répéter .
Y compris des trucs décrits ici: Comment 'inactivité' une expression
NG-REPEET , je suppose que je dois construire soit mon propre NG-répéter ou je dois construire Une directive qui construira chaque rangée dans la table ... Je ne sais pas comment faire non plus. Pouvez-vous m'aider à m'aider s'il vous plaît? Pouvez-vous me montrer quelques exemples.
3 Réponses :
Voici un exemple de peuplement d'un
// Lié à $ Scope.Détails = [] // Objet Array P>
function ProductInfoCtrl($scope) {
$scope.details = [
{dt:'condition',dd:'brand new'},
{dt:'year bought',dd:'3 years ago'},
]
}
Avec votre foreach () la boucle ne serait pas mieux pour la performance, de la stocker tout dans une chaîne, alors faites un append () après le ?
Peut-être, ça sonne comme une bonne idée. Je ferais confiance à une référence ...: D
FYI: Utilisation de compile {POST: ..} est identique à l'aide de lien: fonction (étendue, élément, attributs)
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;
}
}
}
});
Bonjour, comment définissez-vous une montre pour l'expression Setrepeat? Je veux dire comment mettre à jour les enfants lorsque la propriété change?
@supersan c'est tout le point de ce qu'il ne change pas ... N'utilisez donc que cela sur des choses qui n'ont pas besoin d'être mises à jour. Aussi FYI L'équipe angulaire a enfin répertorié et créé une liaison une fois la syntaxe afin que vous n'ayez plus besoin de cela. Vous pouvez maintenant faire ng-répéter = "article dans la liste :: liste" et il liera la répétition une fois et arrêtera d'écouter l'écoute.
oh ok .. tu as raison! En fait, j'ai trébuché sur cette question de Google et je cherchais un moyen de créer une répétition NG personnalisée (pour une utilisation dans mes propres datatables comme la directive). Quoi qu'il en soit, merci pour la clarification.
code simple pour la directive personnalisée ngreaper en angularjs:
@blesh a fourni un exemple de directive dans le lien que vous avez mentionné. Essayez cela et laissez-nous savoir ce qui ne fonctionne pas.
Consultez ma réponse ci-dessous J'ai créé une répétition SET-répétitive via un ensemble de données une fois et n'ajoute pas d'auditeurs de surveillance à la page. Je l'utilise dans mon application afin de surmonter également les problèmes de mémoire.