Angularjs가 트랜스코프 및 바인딩을 분리하여 혼란스러워함

Angularjs가 트랜스코프 및 바인딩을 분리하여 혼란스러워함

한정된 지령과 관련하여 모델의 범위와 구속력을 이해하는데 어려움을 겪고 있습니다.

지시의 범위를 제한한다는 건 그 통제관이란 뜻이란 거 알아$directive.directive는 동일하지 않습니다.단, 디렉티브템플릿 또는 html에 모델을 배치하는 것이 데이터 바인딩에 어떤 영향을 미치는지 혼란스럽습니다.뭔가 아주 근본적인 것을 놓치고 있는 것 같아서 앞으로 나아가기 위해서는 이 점을 이해해야 합니다.

다음 코드를 사용합니다(여기는 http://jsfiddle.net/2ams6/) 참조).

자바스크립트

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
});
app.directive('testel', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template:   '<div ng-transclude>'+
                    '<h3>Template title: {{title}}</h3>' +
                    '<h3>Template data.title:{{data.title}}</h3>' +
                    '</div>'
    }    
}); 

HTML

<div ng-app='app'>
    <div ng-controller="Ctrl">
        <input ng-model="data.title">
        <testel title="{{data.title}}">
            <h3>Transclude title:{{title}}</span></h3>
            <h3>Transclude data.title:{{data.title}}</h3>
        </testel>
    </div>
</div>

은 업데이트만 .{{title}} 및 " " " 입니다.{{data.title}}말미에.왜 트랜슬루전이나 템플릿에 없는 거죠?

이와 같이 입력을 트랜스클루전 내에서 이동한다(여기는 http://jsfiddle.net/eV8q8/1/)://http://jsfiddle.net/eV8q8/1/):

<div ng-controller="Ctrl">
    <testel title="{{data.title}}">
        <input ng-model="data.title">
         <h3>Transclude title: <span style="color:red">{{title}}</span></h3>

         <h3>Transclude data.title: <span style="color:red">{{data.title}}</span></h3>

    </testel>
</div>

는 now만을 입니다.{{data:title}}갱신됩니다.템플릿 또는 트랜슬루드 중 하나를 사용하지 않는 이유는 무엇입니까?

마지막으로 다음과 같이 템플릿 내에서 입력을 이동합니다(http://jsfiddle.net/4ngmf/2/) 참조:

template: '<div ng-transclude>' +
            '<input ng-model="data.title" />' +
            '<h3>Template title: {{title}}</h3>' +
            '<h3>Template data.title: {{data.title}}</h3>' +
            '</div>'

{{data.title}}갱신됩니다.다시 한 번 말하지만, 왜 나머지 3개의 바인딩은 안 되나요?

내 얼굴을 똑바로 쳐다보고 있는데 놓치고 있는 게 분명했으면 좋겠어.이걸 사게 해주면 맥주 사주거나 점수 주거나 뭐 그런 거 줄게.대단히 고맙습니다.

피들링으로 3가지 스코프가 생성됩니다.

1. 에 Ctrl에.ng-controller
2. 변환된 스코프(transclused scope)에 범위transclude: true
3. 에 )scope: { ... }

fielen1에서는 텍스트 상자에 입력하기 전에 다음 항목이 있습니다.

스코프 003은 컨트롤러와 관련된 스코프입니다.에 입력하지 않았기 하지 않았습니다.data하면, 「004」가 .title속성이 생성되었지만 비어 있습니다.에는 부모 스코프가 있습니다.data.title아직 소유권이 없습니다.

「 」를 한 후my title텍스트 박스에는 다음과 같은 기능이 있습니다.

003이 되었습니다.data으로 칠해진 ), 노란색으로 칠해져 .title 속성이 " "로 설정되어 있습니다.my title property .title입니다.data.title 값 "" " " " " " " "my title(값이 변경되었기 때문에 노란색으로 표시됩니다).

스코프는 체인을 수 .HTML 는는 는는 는는 는는는 는는 html 。$scope.data.title, (단,)$scope.title존재하지 않습니다).

수 속성만 할 수 있습니다.title.

fielen2는 입력하기 전에 fielen1과 같은 그림이 됩니다.

「 」를 한 후my title:

「」의 해 주세요.data.title트랜스코프된 스코프에 속성이 표시됩니다.가 아직 입니다.data.title스코프에는 에, 「 스코프에는 없습니다.title속성 값이 비어 있습니다.

fielen3에서는 입력하기 전에 fielen1과 같은 그림을 볼 수 있습니다.

「 」를 한 후my title:

「」의 해 주세요.data.title이치노스코프에 할 수 에, 은 「」입니다.my title이치노

---

Angular v1.2 업데이트:

변경 eed299a로 이제 Angular가 트랜슬레이션하기 전에 트랜슬레이션 포인트를 지웁니다.Template title: ... ★★★★★★★★★★★★★★★★★」Template data.title: ...되지 않습니다.ng-transclude을 사용하다

'<h3>Template title: <span style="color:red">{{title}}</span></h3>' +
'<h3>Template data.title: <span style="color:red">{{data.title}}</span></h3>' +
'<div ng-transclude></div>'

아래 Angular v1.3 업데이트에서는 이 템플릿이 변경되었습니다.

---

Angular v1.3+ 업데이트:

Angular v1.3 이후 트랜스코프된 스코프는 컨트롤러 스코프의 자식이 아니라 디렉티브의 격리 스코프의 자식이 되었습니다.fielin1에 입력하기 전에 다음을 입력합니다.

이 업데이트의 그림은 Peri$scope 도구로 그려지기 때문에 그림이 조금 다릅니다.그@ 、 の property property property property property property property we indicates 、 [].@구문과 분홍색 배경은 툴이 매핑의 상위 참조를 찾을 수 없었음을 의미합니다(텍스트 상자에 아무것도 입력하지 않았기 때문에 이는 사실입니다).

「 」를 한 후my title텍스트 박스에는 다음과 같은 기능이 있습니다.

를 isolate isolate isolate isolate isolate isolate isolate isolate isolate isolate isolate isolate isolate 를 사용하는 속성을 분리합니다.@ binding 합니다.@스코프에서 이 값을 수 속성에 도 볼 수 있습니다.Peri$scope는 상위 스코프에서 이 정확한 문자열 값을 찾을 수 있었기 때문에 해당 속성에 대한 참조도 보여줍니다.

2번 바이올린에서는 입력하기 전에 1번 바이올린과 같은 그림이 나옵니다.

「 」를 한 후my title:

「」의 해 주세요.data.title트랜스코프된 스코프에 속성이 표시됩니다.가 아직 입니다.data.title스코프에는 에, 「 스코프에는 없습니다.title속성 값이 비어 있습니다.

fielen3에서는 입력하기 전에 fielen1과 같은 그림을 볼 수 있습니다.

「 」를 한 후my title:

「」의 해 주세요.data.title이치노된 스코프가 할 수 있는 에서도, 「」를 개입시켜 할 수 .$parent까지는 안 볼 title ★★★★★★★★★★★★★★★★★」data.title 스코프상속을 에서만 볼 수, 이 정의되어 있지 -- 컨컨 doesn doesn doesn doesn doesn즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉즉 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --.

Mark의 환상적인 도식을 포함하여 제시된 모든 답변을 읽은 후, 이것이 범위에 대한 저의 이해와 제 질문에 대한 상속입니다.이 그림이 어디에 들어가는지 코멘트를 주시면 제가 적절히 업데이트 할 수 있을 것 같습니다.마크가 제시한 내용에 대해 단순히 다른 견해를 제시해 주었으면 합니다.

좋은 질문이야, Btw!제 답변이 웅변적이길..

답은 트랜스코드된 요소가 어떻게 그 범위를 얻느냐에 달려 있습니다.

요약하면 두 가지 범위가 있습니다.

1. (「」를 가지는 것)는, 과 같습니다.$scope.data.title에 의해 input□□□□□□□□★
2. $scope.title.

「」를 하는 $scope.data.title의 , 「」$scope.title또한 변화합니다.

HTML의 두 섹션, 트랜스코드된 섹션과 템플릿 섹션도 있습니다.트랜스코드된HTML은 컨트롤러의 범위 내에 있고 템플릿HTML은 디렉티브의 범위 내에 있습니다.따라서 트랜스코프된HTML은 다음 정보를 전혀 알 수 없습니다.title는 템플릿 스코프에 대해 data.title

이것이 실제로 Transclusion이 의도한 바입니다.지침의 자녀 요소가 부모 범위(이 경우 컨트롤러 범위)를 유지할 수 있도록 하는 것입니다.설계상 트랜스코드된 요소는 명령어로 변환된 요소를 인식하지 못하기 때문에 명령어의 범위에 액세스할 수 없습니다.

반면 지시어 템플릿은 지시어의 범위에만 액세스할 수 있습니다.

이름을 좀 더 명확하게 하기 위해 코드를 조금 변경했습니다(단, 기능은 동일).

http://jsfiddle.net/yWWVs/2/

언급URL : https://stackoverflow.com/questions/16653004/confused-about-angularjs-transcluded-and-isolate-scopes-bindings