Question

这是我的JS代码。目标是创建一个指令，用于更改范围变量更改中关联的DOM元素可见性，但在此我只是通过“警告”替换了代码＆＃39;为了得到一个最小的（不是）工作的例子。

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

这是我第一次使用＆＃39;控制器作为＆＃39;语法与我的控制器。这是问题吗？

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'属性。

如何在＆＃34;控制器内的指令中正确使用$ watch作为＆＃34;控制器？

1 个答案: