作用域值的变化不会被指令中的$watch捕获

scope value change doesn't get caught by $watch in directive

本文关键字:watch 指令 捕获 变化 作用域      更新时间:2023-09-26

我从这里跟随文档。这是我按照建议创建的指令。

.directive('setFocusIf', function() {
  return {
    link: function($scope, $element, $attr) {
      $scope.$watch($attr.setFocusIf, function(value) {
        if (value) { $element[0].focus(); }
      });
    }
  };
});

和我的标记:

<input set-focus-if="hasFocus" ng-focus="hasFocus = false">
<button type="button" ng-click="addItem()">Add</button>

addItem()函数执行操作,将hasFocus的值设置为true。但是,这不起作用,元素没有得到关注。在调试时,我发现$watch本身没有被调用。

然而,当我在按钮中设置ng-click="hasFocus = true"的值而不是在addItem()函数中将hasFocus设置为true时,它工作得非常好。

我试着把它封闭在$apply中,但似乎不起作用,我对它的内部不是很清楚。我想我在这里漏掉了一些基本的东西,有人能指出这两种方法的区别吗?

这是一个显示问题的柱塞

好的,在尝试了不同的东西之后,我发现它与作用域中的点有关。

I changed this

<input set-focus-if="hasFocus" ng-focus="hasFocus = false">

<input set-focus-if="focus.hasFocus" ng-focus="focus.hasFocus = false">

当然,addItem现在设置了$scope.focus.hasFocus = true;

现在可以正常工作了…

顺便说一句,我需要了解这样设置焦点是否正确。因为这对需要关注不同场合/事件的多个元素不起作用,除非对指令进行相应的修改。但它仍然不会是有效的,因为$watch将被调用的每个元素都有set-focus-if指令。