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

Question

这是我的 JS 代码。 objective 是创建一个指令来更改关联的 DOM 元素在范围变量更改时的可见性，但在这里我只是用 'alert' 指令替换了代码以获得最小的（不是）工作示例。

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 上看到）。代码有什么问题？

这是我第一次在控制器中使用 'controller as' 语法。这是这里的问题吗？

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' 属性你的指令。

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

How to properly use $watch in a directive inside a "controller as" controller?

javascript

angularjs

angularjs-watch