简单 Ng-Repeat（不重复）场景指令 TemplateUrl

Question

使用简单指令关闭

我有一个简单的闭包，有几个属性 hello 和 items。当我绑定 hello world 时工作正常，但当我使用 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"
        };
    });
})();

指令内代码

这是用于呈现自定义指令的代码。hello 变量显示正确，但项目根本没有渲染。如果列表中有一项，则会显示该项目。

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

渲染图像

相同的字符串打破循环

这似乎是不直观的行为。你自己尝试一下吧。我更改了示例中的一个字母，模板按预期呈现。

谁能告诉我为什么会这样？

例子 的代码。此代码会产生不同的结果，并且由于某种原因不起作用，除非您添加“$scope”前缀而不是“this”，如下所示 在此输入链接描述. 。更令人困惑的是，范围版本实际上不会产生本文所描述的问题。

Answer 1

ngRepeat 期望 items 是不同的对象（比较 ===).
由于字符串是基元，因此 2 个相同的字符串被视为相等/相同。

您可以使用 track by 指示 ngRepeat 比较其他东西，例如指数：

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

Answer 2

查看生成的icOdeTagcode如何实现：

        //...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函数跟踪元素，其可以由ngRepeat表达式（track by）提供，或者由指令本身（trackByIdExpFn）决定。在这种情况下，正如您所看到的，表达式只是生成的生成icetagcode。这意味着您对相同元素的碰撞。