我认为这个指令是不必要的。使用HTML id和类属性选择所需的元素，并让服务使用文档。getElementById或document。querySelector来应用焦点(或jQuery等价物)。

标记是标准的HTML/angular指令，添加了id/classes供选择

<input id="myInput" type="text" ng-model="myInputModel" />

控制器广播事件

$scope.$emit('ui:focus', '#myInput');

在UI服务中使用querySelector -如果有多个匹配项(比如由于类)，它将只返回第一个

$rootScope.$on('ui:focus', function($event, selector){
  var elem = document.querySelector(selector);
  if (elem) {
    elem.focus();
  }
});

您可能希望使用$timeout()强制一个摘要循环

如果你正在使用modalInstance并且拥有对象，你可以在打开模式后使用“then”来执行操作。如果你没有使用modalInstance，并硬编码打开模态，你可以使用事件。$timeout不是一个好的解决方案。

你可以做(Bootstrap3):

$("#" + modalId).on("shown.bs.modal", function() {
    angular.element("[name='name']").focus();
});

在modalInstance中，您可以查看如何在打开modal后执行代码的库。

不要像这样使用$timeout， $timeout可以是0、1、10、30、50、200或更多，这将取决于客户端计算机，以及打开模式的进程。

不要使用$timeout，让方法告诉你什么时候可以聚焦;)

希望这对大家有所帮助!：）

你可以创建一个指令，将焦点集中在postLinking的装饰元素上:

angular.module('directives')
.directive('autoFocus', function() {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            _element[0].focus();
        }
    };
});

然后在你的html中:

<input type="text" name="first" auto-focus/> <!-- this will get the focus -->
<input type="text" name="second"/>

这适用于情态动词和ng-if切换的元素，而不适用于ng-show，因为postlinks只发生在HTML处理中。

以编程方式调用元素上的任何操作:click()， focus()， select()…

用法:

<a href="google.com" auto-action="{'click': $scope.autoclick, 'focus': $scope.autofocus}">Link</a>

指令:

/**
 * Programatically Triggers given function on the element
 * Syntax: the same as for ng-class="object"
 * Example: <a href="google.com" auto-action="{'click': autoclick_boolean, 'focus': autofocus_boolean}">Link</a>
 */
app.directive('focusMe', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            autoAction: '<',
        },
        link: function (scope, element, attr) {
            const _el = element[0];
            for (const func in scope.autoAction) {
                if (!scope.autoAction.hasOwnProperty(func)) {
                    continue;
                }
                scope.$watch(`autoAction['${func}']`, (newVal, oldVal) => {
                    if (newVal !== oldVal) {
                        $timeout(() => {
                            _el[func]();
                        });
                    }
                });
            }

        }
    }
});

要解决这个问题，最好在controller或ng-init中设置初始化变量:

 <input ng-init="autofocus=true" auto-action="{'focus': autofocus}">

你可以使用下面的指令，在HTML输入中获取一个bool值来关注它…

//js file
angular.module("appName").directive("ngFocus", function () {
       return function (scope, elem, attrs, ctrl) {
             if (attrs.ngFocus === "true") {
                 $(elem).focus();
             }
             if (!ctrl) {
                 return;
             }
       elem.on("focus", function () {
            elem.addClass("has-focus");
            scope.$apply(function () {
                ctrl.hasFocus = true;
            });
        });
    };
});

<!-- html file -->
<input type="text" ng-focus="boolValue" />

你甚至可以在控制器中设置一个函数为ngFocus指令值 注意下面的代码…

<!-- html file -->
<input type="text" ng-focus="myFunc()" />


//controller file
$scope.myFunc=function(){
      if(condition){
          return true;
      }else{
          return false;
      }
}

这个指令发生在HTML页面渲染时。

这里只是一个新手，但我能够让它在ui.bootstrap.modal中工作，使用这个指令:

directives.directive('focus', function($timeout) {
    return {
        link : function(scope, element) {
            scope.$watch('idToFocus', function(value) {
                if (value === element[0].id) {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

在$modal中。我使用下面的方法来指示焦点应该放在哪里的元素:

var d = $modal.open({
        controller : function($scope, $modalInstance) {
            ...
            $scope.idToFocus = "cancelaAteste";
    }
        ...
    });

在模板上我有这个:

<input id="myInputId" focus />