以角度方式设置元素焦点

Question

考虑到jquery的方式，但我想用angular的方式来实现这一点，我做了一个解决方案，我们使用元素的id在任何函数中设置焦点，所以，由于我在angular方面非常新手，我想了解一些意见，如果这种方式是正确的，有什么问题，无论什么，任何可以帮助我在angular中更好地实现这一点的方法。

基本上，我创建一个指令，监视用户用指令定义的作用域值，或者默认的focusElement，当该值与元素的id相同时，该元素会设置焦点本身。

angular.module('appnamehere')
  .directive('myFocus', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attrs) {
        if (attrs.myFocus == "") {
          attrs.myFocus = "focusElement";
        }
        scope.$watch(attrs.myFocus, function(value) {
          if(value == attrs.id) {
            element[0].focus();
          }
        });
        element.on("blur", function() {
          scope[attrs.myFocus] = "";
          scope.$apply();
        })        
      }
    };
  });

由于某种原因需要获得焦点的输入会这样做

<input my-focus id="input1" type="text" />

<a href="" ng-click="clickButton()" >Set focus</a>

和设置焦点的示例函数：

$scope.clickButton = function() {
    $scope.focusElement = "input1";
}

在Angular中这是一个很好的解决方案吗？它是否有我糟糕的经验还没有看到的问题？

Answer 1

解决方案的问题是，当与创建新范围的其他指令（例如ng-repeat）绑定在一起时，它不能很好地工作。更好的解决方案是简单地创建一个服务函数，使您能够在控制器中强制地聚焦元素，或者在HTML中声明地聚焦元素。

演示

JavaScript

 .factory('focus', function($timeout, $window) {
    return function(id) {
      // timeout makes sure that it is invoked after any other event has been triggered.
      // e.g. click events that need to run before the focus or
      // inputs elements that are in a disabled state but are enabled when those events
      // are triggered.
      $timeout(function() {
        var element = $window.document.getElementById(id);
        if(element)
          element.focus();
      });
    };
  });

  .directive('eventFocus', function(focus) {
    return function(scope, elem, attr) {
      elem.on(attr.eventFocus, function() {
        focus(attr.eventFocusId);
      });

      // Removes bound events in the element itself
      // when the scope is destroyed
      scope.$on('$destroy', function() {
        elem.off(attr.eventFocus);
      });
    };
  });

.controller('Ctrl', function($scope, focus) {
    $scope.doSomething = function() {
      // do something awesome
      focus('email');
    };
  });

<input type="email" id="email" class="form-control">
<button event-focus="click" event-focus-id="email">Declarative Focus</button>
<button ng-click="doSomething()">Imperative Focus</button>