AngularJS : 지시어와 코드 변환 된 지시어 사이의 접근 범위

Question

개별 입력 지시문으로 구성된 모듈 형식의 작은 데모를 만들었습니다. 또한 동일한 컨트롤러 및 범위에 바인딩 된 양식 값 미리보기가 있습니다. 당신은 여기에서 좀 걸릴 수 있습니다

<mailer-form> 
    <mailer-input form="mail" model="email"> 
    <input class="form-control" placeholder="Email" ng-model="mail.email"> 
    </mailer-input> 
</mailer-form> 

<mailer-preview></mailer-preview> 

:

http://plnkr.co/edit/0FuzfOFFDN5XcNyZcpBv 

문제는 ng-이다

문제를 일으킬 입력 지시어의 형식은 내부의 매개자하는 입력입니다 양식의 템플릿에있는 모델은 부모 범위를 업데이트합니다 ( ). 그래서 첫 번째 이메일 입력은 이고 나머지는 수행하지 않습니다.

어떻게 transcluded 지시문을 두 가지 방법으로 바인딩 할 수 있습니까?

감사합니다.

Answer 1

ng-transclude 지시어는 항상 transcluded 콘텐츠에 대해 새 하위 범위를 만듭니다.

여기에 새로운 범위를 만들지는 않지만 아직 구현되지 않은 요청이 있습니다 (https://github.com/angular/angular.js/issues/5489).

transcluded 콘텐츠가 컨테이너와 동일한 범위를 갖게하려면 ng-transclude 대신 link()에 transcludeFn을 아래 코드 조각처럼 사용할 수 있습니다.

link: function(scope, element, attributes, controllers, transcludeFn){ 
    transcludeFn(scope, function(nodes) { 
    element.find('.transclude-here').append(nodes); 
    }) 
} 

및 전체 예를 들어

<div class="transclude-here"></div> 

있는 사람이

<div ng-transclude></div> 

참조 대체 http://plnkr.co/edit/WYCOxC9xBIOTUWPs2iAq?p=preview

편집 : 여러 장소에서이 동작을 원하는 경우 자신 만의 맞춤형 버전을 작성할 수 있습니다. 이 같은 NG-transclude :

app.directive('myTransclude', function() { 
    return { 
    restrict: 'EAC', 
    link: function(scope, element, attrs, controllers, transcludeFn) { 
     transcludeFn(scope, function(nodes) { 
     element.empty(); 
     element.append(nodes); 
     }); 
    } 
    }; 
}); 

및 HTML 템플릿

가 :

이

<div my-transclude></div>