如何在"controller as"控制器内的指令中正确使用$watch？

Question

这是我的JS代码。目标是创建一个指令，该指令更改范围变量更改时关联的 DOM 元素可见性，但在这里我只是用"警报"入侵替换了代码，以获得一个最小(不是(工作示例。

app.directive( 'myDirective', [ function () {
return {
restrict: 'A',
link: function( scope, element, attrs ) {
scope.$watch( 'configurationMode', function( newValue ) {
alert("TOTO");
}, true );
}
};
} ]);
app.controller( 'ControlPanelController', function() {
this.configurationMode = true;
// and some additional code that 
// modifies 'configurationMode'
// in response to UI events
});

我以直接的方式在 HTML 中使用指令：

<div my-directive>
...
</div>

alert('TOTO')在第一个消化周期中调用一次，但在此之后不会调用一次，即使configurationMode变量更改了值(我可以在 UI 上看到(。代码有什么问题？

这是我第一次在控制器中使用"控制器作为"语法。这是这里的问题吗？

Answer 1

您必须将configurationMode附加到控制器中的scope。scope.$watch仅监视作用域上的属性。

有几个技巧可以监视附加到控制器的变量。一种可能是使用控制器作为，说控制器作为$ctrl，然后scope.$watch('$ctrl.configurationMode', function(){})。

我只会使用绑定，双向绑定，并通过指令上的绑定传递值......语法会有所不同，具体取决于您使用的 AngularJS/Angular 版本。

.directive( 'myDirective', [ function () {
return {
restrict: 'A',
scope:{
configurationMode: '='
},
link: function(scope, element, attrs) {
scope.$watch('configurationMode', function(newValue) {
alert("TOTO");
}, true);
}
};
}]);

然后使用它

<div my-directive configuration-mode="$ctrl.configurationMode"></div>

我的 AngularJS 1.x 有点生锈，所以请检查文档 https://docs.angularjs.org/guide/directive 我猜你使用的是AngularJS 1.x，因为你的指令上有一个限制：'A'属性。