Angular에 ng-repeat 스코프가 있는 Directive Isolate 스코프JS

Angular에 ng-repeat 스코프가 있는 Directive Isolate 스코프JS

이 명령어를 다른 할 수 이 할 수 .ng-repeat동작하지 않습니다.

이 항목에 대한 모든 문서와 스택 오버플로 답변을 읽고 문제를 이해했습니다.나는 내가 평소 하던 모든 고차들을 피했다고 생각한다.

에, 이 코드는, 이, 이, 이, 이, 이, 이, 이 가 나는 것입니다.ng-repeat 는 격리 스코프 바인딩을 수행합니다.내 지시사항은 격리 범위를 생성하고 상위 범위의 개체에 양방향 데이터 바인딩을 수행합니다.는 이 합니다.이가 "Directional"이 "Directional"에서 "Directional"이 "Direction"에서 "Directional"로 때 합니다.ng-repeat(미국의) ,에서는ng-repeat은 새 ng-repeat 및 는 변경을 하지 않습니다이 모든 것은 내가 읽은 것을 바탕으로 한 것이다.

또, 특정의 요소에 복수의 디렉티브가 있는 경우는, 스코프가 1개만 작성되는 것을 알았습니다. 은 ★★★★★★★★★★★★★★★★★★★★★.priority각 디렉티브에서 디렉티브 적용 순서를 정의하도록 설정할 수 있습니다. 디렉티브는 priority별로 정렬되고 그 컴파일 함수가 호출됩니다(http://docs.angularjs.org/guide/directive) 에서 priority라는 단어를 검색합니다).

되고, 그 후에 언제가 될지를 .ng-repeat상위 스코프에서 프로토타입으로 상속되는 스코프를 생성하는 대신 격리 스코프를 재사용합니다.ng-repeat도 레벨로 되어 있습니다.1000...여부는 명확하지 않다.1priority priority priority priority priority priority priority priority priority 。 level priority level을 했을 때1별 가 없어, 는 내지지 in in, in in in in in in in in in in in in in in in in in in in in in in in in in in in in in in in in.2000하지만 그게 상황을 더 악화시킨다: 내 쌍방향 결속력은undefined내 지시문에는 아무것도 표시되지 않습니다.

나는 내 문제를 보여주기 위해 바이올린을 만들었다.코멘트를 작성했습니다.priority을 사용하다.name-row이름 객체의 이름 및 성 필드를 보여줍니다.때, 을 표, a, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, when, when, when a, a, a, a, a,selectedscope.main scope의 입니다.인 '우리 이름'은selected가 name-row양방향 데이터 바인딩을 사용한 지시문입니다.

메인 스코프의 함수를 호출하여 이 기능을 실행하는 방법을 알고 있습니다.나도 알아 만약selected다른 물체 안에 있고, 바깥 물체와 결합하면, 모든 것이 작동할 것입니다.하지만 나는 지금 그 해결책에 관심이 없다.

대신 궁금한 점은 다음과 같습니다.

• 예방할 수 있나요?ng-repeat상위 스코프에서 프로토타입으로 상속되는 스코프를 만드는 대신 내 지시의 격리된 스코프를 사용하는가?
• level priority level이 2000내시시 항항? ??? 힐??
• Batarang을 사용하면 어떤 종류의 스코프가 사용되고 있는지 알 수 있습니까?

네, 위의 많은 코멘트를 통해 혼란을 발견하였습니다.먼저 몇 가지 사항을 명확히 하겠습니다.

• ngRepeat은 선택한 격리 범위에는 영향을 주지 않습니다.
• 지침 속성에 사용하기 위해 ngRepeat으로 전달된 파라미터는 프로토타입으로 상속된 범위를 사용합니다.
• 지침이 작동하지 않는 이유는 격리 범위와 무관합니다.

다음은 명령어를 삭제한 동일한 코드의 예입니다.

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

여기 JSFiddle이 동작하지 않음을 보여줍니다.지시와 동일한 결과를 얻을 수 있습니다.

왜안 ??Angular Angular의 는 프로토타입 사용하기 입니다.JS에 관한 것입니다. 값selected부모 스코프에 있는 것은 프리미티브입니다.JavaScript에서 이는 자녀가 동일한 값을 설정할 때 덮어쓰기를 의미합니다.Angular에는 황금률이 있다.JS 범위: 모델 값에는 항상 다음이 있어야 합니다..그 안에.즉, 절대 원형이 되어서는 안 됩니다.자세한 내용은 이 SO 답변을 참조하십시오.

---

여기 스코프가 처음에 어떻게 생겼는지 보여 줍니다.

첫 번째 항목을 클릭하면 스코프가 다음과 같이 표시됩니다.

「」: 「」가 에 주의해 주세요.selectedng반복하다컨트롤러 스코프 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이 있습니다.뷰에는 오브젝트가 반영되어 있어야 합니다.필요한 변경은 프리미티브가 아닌 오브젝트를 사용하는 것 뿐이라는 것을 알 수 있습니다.

처음에 범위:

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

결론: 다시 한 번 말씀드리지만, 문제는 격리 범위나 ngRepeat 작동 방식에 있지 않습니다.당신의 문제는 바로 이 문제를 야기하는 것으로 알려진 규칙을 어기고 있다는 것입니다.Angular' 'JS'의 에는 항상 JS가 ...

질문에 대한 답변을 피하려고 하지 말고 다음 사항을 살펴보십시오.

http://jsfiddle.net/dVPLM/

Angular의 , Angular, 즉 Angular와 함께 할 수 입니다.ng-repeat그걸 무시하려고 하는 게 아니라요

템플릿:

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

지시사항:

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

질문에 대한 답변:

• ng-repeat스코프가 생성됩니다.이것을 바꾸려고 하면 안됩니다.
• 디렉티브의 우선순위는 단순히 실행순서가 아닙니다.를 참조해 주세요.HTML 컴파일러는 컴파일 순서를 어떻게 배열합니까?
• Batarang에서 성능 탭을 선택하면 각 범위에 바인딩된 식을 볼 수 있으며 이것이 예상과 일치하는지 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/15623698/directive-isolate-scope-with-ng-repeat-scope-in-angularjs