$ setViewValue()를 호출하자마자 내 중첩 된 지시문이 ngModel에서 연결이 끊어지는 이유는 무엇입니까?

Question

Plunker here.

다른 지시문 ("parent") 안에 중첩 된 지시문 ("child")이 있습니다. require ngModel 및 ngModelCtrl.$modelValue이 표시되며 최신 템플릿으로 유지됩니다. 즉, ngModelCtrl. $ setViewValue()를 호출 할 때까지입니다.

angular.module('form-example2', []) 
    .controller('MainCtrl', function($scope){ 
    $scope.content = 'Hi'; 
}) 
.directive('parent', function() { 
    return { 
    transclude: true, 
    template: '<div ng-transclude></div>', 
    controller: function(){ 
    }, 
    scope: {} 
    }; 
}) 
.directive('child', function() { 
    return { 
    require: ['ngModel', '^parent'], 
    transclude: true, 
    template: '<div>Model: {{model.$modelValue}} (<a style="text-decoration: underline; cursor: pointer;" ng-click="alter()">Alter</a>)<br />Contents: <div style="background: grey" ng-transclude></div></div>', 
    scope: {}, 
    link: function(scope, elm, attrs, ctrl) { 
     var ngModelCtrl = ctrl[0]; 
     var parentCtrl = ctrl[1]; 

     scope.model = ngModelCtrl; 

     // view -> model 
     scope.alter = function(){ 
     ngModelCtrl.$setViewValue('Hi2'); 
     } 

     // model -> view 

     // load init value from DOM 
    } 
    }; 
}); 

하는 모델 (즉 content) 변화,이 변화는 아이 안에 볼 수 있습니다 : 그래서 여기

이 지침 초기화하는 HTML입니다 : 지시어는

<div parent> 
    <div child ng-model="content">Some</div> 
</div> 

그리고 여기입니다 지령. $ setViewValue() 호출을 트리거하는 "변경"링크를 클릭하면 모델의 값이 "Hi2"가됩니다. 이것은 child 지시문 안에 올바르게 표시되지만 지시문 외부의 모형에는 표시되지 않습니다. 또한 지시문 외부의 모델을 업데이트하면 더 이상 지시문 내부에서 업데이트되지 않습니다.

어째서?

Answer 1

지시문이 제대로 작동합니다. 유일한 문제는 전달 된 모델이 객체 속성이어야한다는 것입니다. 컨트롤러에서

대신 $scope.content = 'Hi';의 : 다음 수정이 호출 코드 (Plunker)로 만들어진 경우에 따라서 지침이 작동

템플릿에서

$scope.content = { 
    value: 'Hi' 
}; 

이 content.value와 content에 대한 모든 참조를 대체 :

<input ng-model="content.value" type="text" /> 
<div parent> 
    <div child ng-model="content.value">Some</div> 
    </div> 
<pre>model = {{content.value}}</pre> 

이 작동하는 이유는, 대략, 각도가 부모 지침의 매개자 역할 범위에 모델에 대한 참조를 (통과 할 때 즉, 하나는 아이가 내가 때문이다 n), 이는 객체 속성을 참조 할 때만 참조가됩니다. 그렇지 않으면 복사이며 Angular는 변경 사항을 볼 수 없습니다. :) 그것을 업데이트에 대한