javascript - 作用域值更改不会被$ watch指令捕获

我正在关注here中的文档。这是我根据建议创建的指令。

.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"的值，而不是在hasFocus函数中将true设置为addItem()时，它可以很好地工作。

我尝试将其包含在$apply中，但似乎无法正常工作，而且我对其内部也不十分清楚。我想我在这里缺少一些基础知识，有人可以指出这两种方法之间的区别是什么。

这是显示问题的plunker

最佳答案

好的，在尝试了不同的东西之后，我发现它与范围内的点有关。

我改变了这个

<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。