Simple Ng-Repeat (Repetición) Escenario De La Directiva TemplateUrl

Question

El Cierre Simple De La Directiva

Tengo una simple cierre que tiene un par de propiedades de hola y elementos.Cuando me unen el hola mundo funciona bien, pero la lista no se muestra cuando yo 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"
        };
    });
})();

El Código Dentro De La Directiva

Aquí está el código que uso para representar la costumbre de la directiva.Hola variable se muestra correctamente, pero los artículos no son de representación en todo.Si hay un elemento en la lista que se muestra.

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

Imagen Renderizada

Cadenas Idénticas Romper El Bucle

Esta parece ser la onu-comportamiento intuitivo.Pruebe su auto.He cambiado una letra de mi ejemplo y la plantilla rendido como se esperaba.

¿Alguien puede decirme por qué se comporta de esta manera?

Ejemplo del código.Este código produce resultados diferentes y no funciona por algún motivo, a menos que usted agregue el "$scope" prefijo en lugar de "este", como en escriba aquí la descripción del enlace.Para hacer las cosas más confusas del ámbito de la versión en realidad no produce el problema de que este post se delimita.

Answer 1

ngRepeat espera items a ser diferentes objetos (comparando por ===).
Ya que son las cadenas de caracteres primitivos, 2 mismas cadenas de caracteres son considerados iguales/idénticos.

Puede utilizar track by para instruir a los ngRepeat para comparar algo más, por ejemplo,índices:

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

Answer 2

Mira cómo ngRepeat se implementa:

        //...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 pistas de a los elementos de una función de identificación, que puede ser proporcionado por el track by la expresión (trackByIdExpFn), o se decide por la propia directiva (trackByIdArrayFn).En este caso, como se puede ver, la expresión es simplemente return hashKey(value).Esto significa que usted tiene un choque de elementos idénticos.