2016-10-28 3 views
0

나는 두 지시어, 및을 공유 절연 지시어는 공유 지침에 직접 결합 양방향을 통과 고립하지만 공유 지시어가 생성되면, 절연 범위를 사용하지 않는이 그 자체.각도 범위, 신비?

목적은 공유 지시어를 변경할 때 고립 지시어는 양방향 바인딩의 변화에 ​​대응해야한다는 것입니다.

<body ng-app="app"> 
    <div ng-controller="main as $ctrl"> 
    <h3>Main data: {{$ctrl.data.bind}}</h3> 
    <isolated bind="$ctrl.data.bind"></isolated> 
    </div> 
</body> 

angular.module("app", []) 
.controller("main", function() { 
    this.data = { 
    bind: 123 
    } 
}) 
.directive("isolated", function() { 
return { 
    scope: { 
    bind: '=' 
    }, 
    bindToController: true, 
    template: '<div><h3>Parent directive data: {{$ctrl.bind}}</h3> </div>' 
      + '<input type="text" shared ng-model="$ctrl.bind" />', 
    controller: function() { 
    this.changed = function() { 
     console.log('Data changed: ' + this.bind); 
    } 
    }, 
    controllerAs: '$ctrl', 
    link: { 
    pre: function($scope) { 
     console.log("Parent data: " + $scope.$ctrl.bind); 
    } 
    } 
} 
}) 
.directive("shared", function() { 
    return { 
    restrict: 'A', 
    require: { 
     ngModel: '^' 
    }, 
    bindToController: true, 
    link: function($scope) { 
     console.log('Current data in shared: ' + $scope.$ctrl.bind) 
    }, 
    controller: function() { 
     this.$postLink = function() { 
     this.ngModel.$modelValue = 321; 
     } 
    }, 
    controllerAs: '$ctrl' 
    } 
}); 

여기에 내가 Plunker

+0

공유 지시어에 문제가 있습니다. 'controllerAs : '$ ctrl''이것을'vm'으로 변경하면 텍스트 상자에 값을 적재하십시오. 그러나 postlink 함수는 값을 변경하지 않습니다. –

답변

0

Gourav Garg를가 올 수 있습니다. 공유 범위로 인해 두 번째 지시문 선언은 $scope.$ctrl 필드보다 우선합니다. 두 번째 선언의 controllerAs 속성은 템플릿의 컨트롤러 속성에 액세스하지 않으므로 아무리 불필요합니다. 템플릿 내에서 두 번째 지시문 제어기 정보가 필요하면 결국 $ctrl 이외의 이름으로 선언하거나 require 구문을 사용하여 첫 번째 지시어에 두 번째 지시문을 입력해야합니다. 그러면 두 번째 지시어의 컨트롤러가 첫 번째 지시문의 컨트롤러에 바인딩됩니다.

요구 사항에 대한 자세한 내용은 각도 지침서 here의 "통신하는 지침 작성"절을 참조하십시오.

행운을 빈다.