単純なNg-Repeat（繰り返さない）シナリオディレクティブTemplateUrl

Question

単純な指令による閉包

私は簡単な閉鎖を持つカップル特性こんにちはびます。私が結合するのこんにちは世界の動作が一覧にない描画を利用すng-繰り返す。

(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"
        };
    });
})();

ディレクティブ内のコード

カスタムディレクティブをレンダリングするために使用するコードは次のとおりです。のこんにちは変数が正常がなレンダリング。リストに1つの項目がある場合、それが表示されます。

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

レンダリングされたイメージ

同じ文字列がループを壊します

これは直感的でない動作のようです。それをあなたの自己を試してみてください。私は私の例から1つの文字を変更し、テンプレートは期待どおりにレンダリングされました。

なぜこれがこのように動作するのか誰にも教えてもらえますか？

例を示します。 コードの。このコードは異なる結果を生成し、次のように"this"の代わりに"this scope"接頭辞を追加しない限り、何らかの理由で機能しません ここにリンクの説明を入力してください.物事をより混乱させるために、スコープされたバージョンは実際にはこの投稿が描写する問題を生成しません。

Answer 1

ngRepeat 期待しています items 異なるオブジェクトであること（比較すると ===).
文字列はプリミティブであるため、2つの同じ文字列は等しい/同一と見なされます。

あなたが使用することができます track by 指示する ngRepeat 他の何かを比較するには、例えばインデックス:

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

Answer 2

どのように見て 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).これは、同一の要素に対して衝突があることを意味します。