간단한 Ng-반복하지 않는(반복)시나리오 Directive TemplateUrl

Question

밈을 가진 간단한 Directive

내가 있는 간단한 클로저가 있는 몇 가지 특성 안녕하세요 아이템.때 나는 바인딩 hello 세계가 작동하지만 목록이 없는 렌더링할 때 사용 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"
        };
    });
})();

코드 안에 지시어

여기에는 코드를 렌더링하는 데 사용할 사용자 지정 directive.안녕하세요 변수가 제대로 표시되지만 항목이 없는 렌더링에서 모두.이 있는 경우에 하나의 항목 목록 그것을 보여줍니다.

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

렌더링 이미지

동일한 문자열 루프 Break

이 될 것으로 보인 유엔 직관적인 동작입니다.자기를보십시오.나는 변경된 문자 하나에서 예 및 렌더링 템플릿으로 예상된다.

할 수 있는 사람이 왜 이처럼 동작한 이?

예 의 코드입니다.이 코드는 다른 결과가 생성과하지 않는 어떤 이유로 작동하지 않는 한 당신이 추가"$범위"접두사를 대신에"이"로 링크를 입력합 여기에 설명.하는 것을 더 혼란 범위 지정된 버전은 실제로 생산하지 않는 문제가 이 게시물을 묘사한다.

Answer 1

ngRepeat 예 items 다른 물체(비교하여 ===).
이 문자열은 primitives,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).즉,당신은 충돌에 대한 동일한 요소입니다.