简单的Ng重复(不重复)场景指令TemplateUrl

时间:2014-06-04 09:59:54

标签: javascript angularjs directive ng-repeat

使用简单指令关闭

我有一个简单的闭包,它有几个属性hello和items。当我绑定hello世界时工作正常,但是当我使用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>

呈现图片

enter image description here

相同的字符串打破循环

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

有谁能告诉我为什么这样做?

Example代码。此代码产生不同的结果,并且由于某些原因不起作用,除非您在enter link description here中添加“$ scope”前缀而不是“this”。为了使事情更加混乱,范围版本实际上不会产生此帖描述的问题。

2 个答案:

答案 0 :(得分:2)

ngRepeat期望items成为不同的对象(按===进行比较) 由于字符串是基元,因此认为2个相同的字符串相等/相同。

您可以使用track by指示ngRepeat比较其他内容,例如指数:

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

答案 1 :(得分:1)

了解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函数跟踪元素,id函数可以由track by表达式(trackByIdExpFn)提供,或者由指令本身(trackByIdArrayFn)决定。在这种情况下,正如您所看到的,表达式只是return hashKey(value)。这意味着您对相同的元素进行了碰撞。