Простая директива сценария Ng-Repeat (не повторяющаяся) TemplateUrl

Закрытие с помощью простой директивы

У меня есть простое закрытие с парой свойств hello и items. Когда я привязываю привет, мир работает нормально, но список не отображается, когда я использую 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 Inside

Вот код, который используется для отображения пользовательской директивы. Переменная hello отображается правильно, но элементы вообще не отображаются. Если в списке есть один элемент, он отображается.

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

Визуализированное изображение

введите здесь описание изображения

Идентичные строки разрывают цикл

Это кажется неинтуитивным поведением. Попробуй сам. Я изменил одну букву из моего примера, и шаблон отобразился, как и ожидалось.

Может ли кто-нибудь сказать мне, почему это ведет себя так?

Пример кода. Этот код дает разные результаты и по какой-то причине не работает, если вы не добавите префикс «$scope» вместо «this», как в введите здесь описание ссылки. Чтобы сделать вещи более запутанными, версия с ограниченной областью действия на самом деле не создает проблемы, описанной в этом посте.


javascript angularjs directive ng-repeat
person jwize    schedule 04.06.2014    source источник
comment
Кажется, есть проблема с идентичными строками.   -  person jwize    schedule 04.06.2014
comment
Было бы здорово, если бы вы могли создать плункер.   -  person Mahesh Sapkal    schedule 04.06.2014
comment
Добавлен пример в конце вопроса.   -  person jwize    schedule 05.06.2014

Ответы (2)


arrow_upward
2
arrow_downward

ngRepeat ожидает, что items будут разными объектами (по сравнению с ===).
Поскольку строки являются примитивами, 2 одинаковые строки считаются равными/идентичными.

Вы можете использовать track by, чтобы дать указание ngRepeat сравнить что-то еще, например. индексы:

ng-repeat="item in task.items track by $index"
person gkalpak    schedule 05.06.2014

arrow_upward
1
arrow_downward

Посмотрите, как реализован 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 отслеживает элементы с помощью функции id, которая может быть предоставлена ​​выражением track by (trackByIdExpFn) или определяется самой директивой (trackByIdArrayFn). В данном случае, как видите, выражение просто return hashKey(value). Это означает, что у вас есть коллизия для одинаковых элементов.

person link    schedule 05.06.2014