angularjs - 在指令中，为什么需要将 .focus() 包装在 $timeout 或 $evalAsync 中才能工作？

Question

在下面的代码中，我不能简单地调用“element[0].focus()”，而是需要将其包装在 $timeout 或 $evalAsync 中？

问题的完整代码和工作示例:http://plnkr.co/qW20iZ5D1tUpQ6gL6shZ?p=preview

app.setFocus = function ($timeout, $rootScope) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      scope.$watch(attr.setFocus, function (newValue, oldValue) {
        if (newValue === true && newValue != oldValue) {
          var performWork = function() {
            element[0].focus();
            console.log(document.activeElement);
          };

          // Question: Why do I need to execute performWork()
          // any of the two commented out ways below
          // in order for this to work? Why does not just
          // calling performWork() work?
          //$timeout(performWork, 0);
          //$rootScope.$evalAsync(performWork);

          performWork();
        }
      });
    }
  };
};

Answer 1

优先考虑您的指令 > 0

app.setFocus = function ($timeout, $rootScope) {
  return {
    restrict: 'A',
    priority: 1,

出现此问题的原因是 ngClass 在设置焦点后操作 DOM 元素，并且可能是失去焦点的原因。

如何解决？

• 您需要 ngClass $watch 在指令的 $watch 之前运行。
• postLinking 函数以相反的顺序运行(低优先级 -> 高优先级)
• $watches 的调用顺序与注册顺序相同。
• ngClass 没有优先级(默认为 0)

因此，通过为指令指定优先级 > 0，您可以确保 ngClass $watch 在指令的 $watch 之前注册

玩得开心!