Semplice NG-ripetizione (non ripetendo) Direttiva scenario Templateurl

Question

chiusura con direttiva semplice

Ho una semplice chiusura che ha una coppia proprietà ciao e articoli. Quando vi legare il mondo ciao funziona bene ma l'elenco non rende quando uso 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"
        };
    });
})();

.

codice all'interno della direttiva

Ecco il codice che utilizza per rendere la direttiva personalizzata. La variabile Ciao si presenta correttamente ma gli articoli non vengono visualizzati affatto. Se c'è un oggetto nell'elenco che si presenta.

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

.

Immagine resa

Stringhe identiche Break the Loop

Questo sembra essere un comportamento non intuitivo. Provate voi stessi. Ho cambiato una lettera dal mio esempio e il modello reso come previsto.

Qualcuno può dirmi perché questo si comporta in questo modo?

Esempio del codice. Questo codice produce risultati diversi e non funziona per qualche motivo a meno che non aggiungi il prefisso "$ scope" anziché "questo" come in inserire il collegamento Descrizione qui . Per rendere le cose più confuse, la versione ambita in realtà non produce il problema che questo post delinea.

Answer 1

ngRepeat si aspetta items per essere oggetti diversi (confrontando da ===).
Dal momento che le stringhe sono primitive, 2 stesse stringhe sono considerate uguali / identiche.

È possibile utilizzare track by per istruire ngRepeat per confrontare qualcos'altro, ad es.Indici:

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

.

Answer 2

Guarda come è implementato ngRepeat:

        //...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 TRACK ELEMENTI da una funzione ID, che può essere fornita dall'espressione track by (trackByIdExpFn), o è deciso dalla direttiva stessa (trackByIdArrayFn).In questo caso, come puoi vedere, l'espressione è semplicemente return hashKey(value).Ciò significa che hai una collisione per elementi identici.