Simple Ng-Repeat (Répétition) Scénario De La Directive TemplateUrl

Question

Fermeture Avec Une Simple Directive

J'ai une simple fermeture qui a un couple de propriétés bonjour et articles.Quand je lier le bonjour tout le monde travaille bien, mais la liste ne s'affichent pas lorsque j'utilise ng-repeat.

(function() {
    var app = angular.module('safety-plus-task-list', []);

    app.directive('taskList', function () {
        return {
            restrict: "E",
            templateUrl: "/Task/TaskList",
            scope: {

            },
            controller: function ($http, $scope, $element, $attrs) {
                this.hello = "HELLO WORLD";
                this.items = [
                    "gravida nisl, id fringilla neque ante vel mi.",
                    "quam gravida nisl, id fringilla neque ante vel mi."];
            },
            controllerAs: "task"
        };
    });
})();

Code À L'Intérieur De La Directive

Voici le code à utiliser pour le rendu de la coutume de la directive.Le bonjour de la variable s'affiche correctement, mais les éléments ne sont pas rendu à tous.Si il y a un élément dans la liste qu'il présente.

{{ task.hello }}
<div ng-repeat="item in task.items">
    <div> {{ item }} </div>
</div>

Le Rendu De L'Image

Des Chaînes Identiques Briser La Boucle

Cela semble être de l'onu-comportement intuitif.Essayez de votre auto.J'ai changé une lettre de mon exemple et le modèle rendu comme prévu.

Quelqu'un peut me dire pourquoi il se comporte comme ça?

Exemple du code.Ce code génère des résultats différents et ne fonctionne pas pour une raison quelconque, sauf si vous ajoutez le "$champ" préfixe au lieu de "ce" que dans entrez description du lien ici.Pour rendre les choses plus confuses de l'étendue de la version en fait ne produit pas le problème que ce post délimite.

Answer 1

ngRepeat attend items pour être différents objets (en comparant par ===).
Depuis les chaînes de caractères sont primitives, 2 mêmes chaînes sont considérées comme égales/identique.

Vous pouvez utiliser track by pour instruire ngRepeat pour comparer quelque chose d'autre, par exempleindices:

ng-repeat="item in task.items track by $index"

Answer 2

Regardez comment ngRepeat est mis en œuvre:

        //...at line 225
        if (trackByExp) {
            trackByExpGetter = $parse(trackByExp);
            trackByIdExpFn = function(key, value, index) {
                // assign key, value, and $index to the locals so that they can be used in
                  hash functions
                if (keyIdentifier) hashFnLocals[keyIdentifier] = key;
                hashFnLocals[valueIdentifier] = value;
                hashFnLocals.$index = index;
                return trackByExpGetter($scope, hashFnLocals);
            };
        } else {
            trackByIdArrayFn = function(key, value) {
                return hashKey(value);
            };
        }

        //...at line 289
        trackByIdFn = trackByIdExpFn || trackByIdArrayFn;

ngRepeat pistes éléments par une fonction d'identification, qui peut être fourni par l' track by l'expression (trackByIdExpFn), ou est décidé par la directive elle-même (trackByIdArrayFn).Dans ce cas, comme vous pouvez le voir, l'expression est tout simplement return hashKey(value).Cela signifie que vous avez une collision pour des éléments identiques.