양방향 바인딩이 변환된 범위에서 지시어로 작동하지 않음

양방향 바인딩이 변환된 범위에서 지시어로 작동하지 않음

이 텍스트박스는 name에 또 다른 있습니다name:

<div class="border" ng-controller="editCtrl">
   Controller: editCtrl <br/>
   <input type="text" ng-model="name" />
   <br/>
   <tabs>
      Directive: tabs <br/>
      <input type="text" ng-model="name"/>
   </tabs>
</div>

mod.directive('tabs', function() {
  return {
    restrict: 'E',
    transclude: true, 
    template:
      '<div class="border" ng-transclude></div>',
  };
});

외부 텍스트 상자에 입력하면 내부 텍스트 상자에 반영되지만 내부 텍스트 상자에 입력하면 작동이 중지됩니다. 즉, 두 텍스트 상자 모두 동일한 값을 반영하지 않습니다.

예를 참조해 주세요.http://jsfiddle.net/uzairfarooq/MNBLd/

scope: {name: '='} 오류를 나타냅니다는 구문 오류를 나타냅니다. ,, 용을 scope: {name: '@'}같은 효과가 있습니다.

어떤 도움이라도 주시면 감사하겠습니다.

인정된 답변 외에도 이 기사는 아동용 스쿠프의 원형적 유전을 이해하는 데 큰 도움이 되었습니다.스코프에 문제가 있는 분은 꼼꼼히 읽어보시길 강력히 추천합니다.

「」가 붙은 transclude: true그 결과 새로운 (제외되는) 자 스코프가 생성됩니다.이 새로운 스코프는 시제품적으로 상위 스코프에서 상속됩니다.이 경우 부모 스코프는 editCtrl 컨트롤러와 관련된 스코프입니다.

스코프, ng-model을 사용하여 값을 위위 、 ng-model)에 바인드한다.에서 양방향 데이터 바인딩을 사용하여 원시 값을 보유한 상위 범위 속성에 바인딩합니다(예:name)는 항상 문제를 일으킵니다.음, 예상대로 작동하지 않는 것 같습니다.하위에서 범위 속성이 변경되면(예: 두 번째 텍스트 상자에 입력) 하위는 동일한 이름의 상위 범위 속성을 숨기거나 섀도우하는 새 범위 속성을 만듭니다.부모 속성이 원시 값을 보유하고 있는 경우 자식 속성이 생성될 때 해당 값이 자식 속성에 복사됩니다.하위 범위(예: 두 번째 텍스트 상자)의 향후 변경 사항은 하위 속성에만 영향을 줍니다.

상자에 전), 는 두째 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 、 식변변변 finds finds음음음음음 the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the the finds the the the the the finds findsname프로토타입 상속을 통해 상위 스코프에서 속성을 확인할 수 있습니다(아래 그림의 선).이것이 두 텍스트 상자가 처음에 동기화 상태를 유지하는 이유입니다.아래 첫 번째 텍스트 상자에 "Mark"를 입력하면 스코프가 다음과 같이 표시됩니다.

두 개의 스코프를 검사할 수 있는 바이올린을 만들었습니다.두 번째 텍스트 상자에 입력하기 전에 두 번째 텍스트 상자 옆에 있는 "범위 표시" 링크를 클릭합니다.그러면 변환된 하위 범위를 볼 수 있습니다.이 소프트웨어에는 다음 명령어가 없습니다.name이 시점에서 자산.콘솔을 클리어하고 두 번째 텍스트 상자에 입력한 후 링크를 다시 클릭합니다.이제 자 스코프가 다음 값을 갖는 것을 알 수 있습니다.name초기값은 부모 속성의 값("Mark")이었습니다.두 번째 텍스트 상자에 "Like Angular" 라고 입력한 경우 스코프는 다음과 같습니다.

두 가지 솔루션이 있습니다.

1. @pgreen2가 제안하는 대로 실행(이것은 "베스트 프랙티스" 솔루션) - 프리미티브 대신 객체를 사용합니다.개체를 사용할 때 하위/변환된 범위는 새 속성을 얻지 않습니다.이곳에서는 원형유전만이 행해지고 있다.editCtrl $scope가 합니다.
   $scope.myObject = { name: "Mark", anotherProp: ... }
   
2. 에 대한 을 하기 에 이는 되지 않습니다 $parent를 사용합니다(HTML은 다음과 같습니다).ng-model="$parent.name"<input> 부 < < < < < < < < < <.위의 첫 번째 그림은 이 기능의 구조를 나타내고 있습니다.

사용하면 합니다.scope: {name: '='}양방향 데이터 바인딩 사용 시('=' 사용 시) 보간은 허용되지 않습니다. 즉, {{}}을(를) 사용할 수 없습니다.<tabs name="{{name}}"><tabs name="name">.

스코프가 는 ng-transclude를 하기 때문입니다.scope: { ... }.

한 것에 대하여는, 「(」를 참조해 .
AngularJS에서 스코프 프로토타입/프로토타입 상속의 뉘앙스는 무엇입니까?

저는 그 문제가 범위 지정과 관련이 있다고 생각합니다."이쪽 텍스트 상자에는 " 텍스트 상자에는 "이쪽 텍스트 상자에는 "이쪽 텍스트 상자에는 "이쪽 텍스트 상자"가 없습니다.name외부 스코프에서 상속되도록 설정합니다.그래서 외부 상자에 입력된 내용이 내부 상자에 반영됩니다.내부 이 발생하면 범위에는 내부 됩니다.name, 더 에 얽매이지 입니다.name외부 텍스트 상자가 동기화되지 않습니다.

적절한 수정 방법은 모델만 범위 내에 저장하고 값은 저장하는 것입니다.http://jsfiddle.net/pdgreen/5RVza/에서 수정했습니다.모델 오브젝트를 만드는 것이 요령입니다.data및 그 아, 네, 네, 네, 네.

잘못된 코드는 디렉티브의 스코프를 수정하고 올바른 코드는 디렉티브의 스코프 모델을 수정합니다.이 미묘한 차이에 의해 스코프 상속이 올바르게 동작합니다.

Mishko Hevery의 표현대로 스코프는 컨트롤러에서는 쓰기 전용, 디렉티브에서는 읽기 전용이어야 한다고 생각합니다.

업데이트: 레퍼런스: https://www.youtube.com/watch?v=ZhfUv0spHCY#t=29m19s

구문 오류는 잘못 쓴 것을 의미합니다.특정 프레임워크/라이브러리와 관련이 없습니다.아마 ""를 붙이는 것을 잊었거나 파라테제스를 닫는 것을 잊은 것 같습니다.다시 한 번 확인해 보세요.

언급URL : https://stackoverflow.com/questions/14481610/two-way-binding-not-working-in-directive-with-transcluded-scope