角度范围，神秘？

我有两个指令，隔离和共用，所述隔离指令通过双向直接结合共用指令但共用指令不使用隔离范围，是创建它自己的。角度范围，神秘？

的目标是，隔离指令应变化的时候，共享指令变化作出回应的双向绑定。

<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

来源

2016-10-28 Morwe

问题在于您的共享指令。 'controllerAs：'$ ctrl''将其改为'vm'加载文本框中的值。但后链接功能不会更改值。 –

Gourav加尔格是正确的。由于共享范围，第二个指令声明覆盖了$scope.$ctrl字段。无论如何，第二个声明中的controllerAs属性是不需要的，因为您从不访问模板中的控制器属性。如果最终需要在模板中使用第二个指令控制器信息，则需要将其名称声明为$ctrl以外的其他名称，或者更好的是，使用require语法来要求第一个指令中的第二个指令。这将把第二个指令的控制器绑定到第一个指令的控制器上的一个属性。

有关require的更多信息，请参阅角度指令指南here的“创建指令通信”部分。

祝你好运！

来源

2016-10-28 21:04:01

角度范围，神秘？

回答

相关问题