[angularjs] AngularJS에서 ng-repeat 범위가있는 지시 격리 범위

좋아, 위의 많은 의견을 통해 혼란을 발견했습니다. 첫째, 몇 가지 설명이 있습니다.

• ngRepeat는 선택한 격리 범위에 영향을주지 않습니다.
• 당신의 지시자의 속성에서 사용하기 위해 ngRepeat에 전달 된 매개 변수는 않습니다 prototypically 상속 범위를 사용
• 지시문이 작동하지 않는 이유는 격리 범위와 관련이 없습니다.

다음은 동일한 코드이지만 지시문이 제거 된 예입니다.

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

다음은 작동하지 않음을 보여주는 JSFiddle 입니다. 지시문에서와 똑같은 결과를 얻습니다.

왜 작동하지 않습니까? AngularJS의 범위는 프로토 타입 상속을 사용하기 때문입니다. selected부모 범위 의 값 은 기본 입니다. JavaScript에서 이것은 자식이 동일한 값을 설정하면 덮어 쓰게됨을 의미합니다. AngularJS 범위에는 황금률이 ​​있습니다. 모델 값 에는 항상 a .가 있어야 합니다. 즉, 그들은 결코 원시적이어서는 안됩니다. 자세한 내용은 이 SO 답변 을 참조하십시오.

---

다음은 스코프의 초기 모습입니다.

첫 번째 항목을 클릭하면 이제 범위가 다음과 같이 표시됩니다.

selectedngRepeat 범위에 새 속성이 생성되었습니다. 컨트롤러 범위 003은 변경되지 않았습니다.

두 번째 항목을 클릭하면 어떤 일이 발생하는지 짐작할 수 있습니다.

---

따라서 귀하의 문제는 실제로 ngRepeat로 인한 것이 아니라 AngularJS의 황금률을 위반하여 발생합니다. 이를 수정하는 방법은 단순히 객체 속성을 사용하는 것입니다.

$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

다음은 이 작업을 보여주는 두 번째 JSFiddle 입니다.

처음에 범위는 다음과 같습니다.

첫 번째 항목을 클릭 한 후 :

여기서 컨트롤러 범위는 원하는대로 영향을받습니다.

또한 이것이 격리 범위를 사용하여 지시문과 함께 작동한다는 것을 증명하기 위해 (다시 말하지만 이것은 문제와 관련이 없기 때문에) 여기에 JSFiddle 도 있습니다.보기는 객체를 반영해야합니다. 필요한 유일한 변경 사항은 primitive 대신 객체 를 사용하는 것입니다 .

초기 범위 :

첫 번째 항목을 클릭 한 후 범위 :

결론 : 다시 한 번, 귀하의 문제는 격리 범위와 관련된 것이 아니며 ngRepeat의 작동 방식과 관련이 없습니다. 문제는 바로이 문제를 일으키는 것으로 알려진 규칙을 위반하고 있다는 것입니다. AngularJS의 모델은 항상 ..