如果所需的焦点元素被注入到指令模板中，前面的所有答案都将不起作用。 下面的指令既适用于简单元素，也适用于指令注入的元素(我用typescript写的)。它接受内部可聚焦元素的选择器。如果你只需要关注self元素——不要向指令发送任何选择器参数:

module APP.Directives {

export class FocusOnLoadDirective implements ng.IDirective {
    priority = 0;
    restrict = 'A';

    constructor(private $interval:any, private $timeout:any) {

    }

    link = (scope:ng.IScope, element:JQuery, attrs:any) => {
        var _self = this;
        var intervalId:number = 0;


        var clearInterval = function () {
            if (intervalId != 0) {
                _self.$interval.cancel(intervalId);
                intervalId = 0;
            }
        };

        _self.$timeout(function(){

                intervalId = _self.$interval(function () {
                    let focusableElement = null;
                    if (attrs.focusOnLoad != '') {
                        focusableElement = element.find(attrs.focusOnLoad);
                    }
                    else {
                        focusableElement = element;
                    }
                    console.debug('focusOnLoad directive: trying to focus');
                    focusableElement.focus();
                    if (document.activeElement === focusableElement[0]) {
                        clearInterval();
                    }
                }, 100);

                scope.$on('$destroy', function () {
                    // Make sure that the interval is destroyed too
                    clearInterval();
                });

        });
    };

    public static factory = ():ng.IDirectiveFactory => {
        let directive = ($interval:any, $timeout:any) => new FocusOnLoadDirective($interval, $timeout);
        directive.$inject = ['$interval', '$timeout'];
        return directive;
    };
}

angular.module('common').directive('focusOnLoad', FocusOnLoadDirective.factory());

}

简单元素的使用示例:

<button tabindex="0" focus-on-load />

内部元素的使用示例(通常用于动态注入元素，如directive with template):

<my-directive focus-on-load="input" />

你可以使用任何jQuery选择器来代替“input”

我不认为$timeout是一个将元素集中在创建上的好方法。下面是一个使用内置angular功能的方法，它是从angular文档的黑暗深处挖掘出来的。注意“link”属性是如何被分为“pre”和“post”的，分别是pre-link和post-link函数。

工作示例:http://plnkr.co/edit/Fj59GB

// this is the directive you add to any element you want to highlight after creation
Guest.directive('autoFocus', function() {
    return {
        link: {
            pre: function preLink(scope, element, attr) {
                console.debug('prelink called');
                // this fails since the element hasn't rendered
                //element[0].focus();
            },
            post: function postLink(scope, element, attr) {
                console.debug('postlink called');
                // this succeeds since the element has been rendered
                element[0].focus();
            }
        }
    }
});

<input value="hello" />
<!-- this input automatically gets focus on creation -->
<input value="world" auto-focus />

完整的AngularJS指令文档:https://docs.angularjs.org/api/ng/service/$compile

如果你正在使用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，让方法告诉你什么时候可以聚焦;)

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

不需要创建自己的指令，可以简单地使用javascript函数来完成一个焦点。

这里有一个例子。

在html文件中:

<input type="text" id="myInputId" />

在javascript文件中，例如在控制器中，你想要激活焦点的地方:

document.getElementById("myInputId").focus();

以编程方式调用元素上的任何操作: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}">

Mark和Blesh有很好的答案;然而，Mark的回答有一个Blesh指出的缺陷(除了实现复杂之外)，我觉得Blesh的回答在创建一个专门向前端发送焦点请求的服务时存在语义错误，而实际上他所需要的只是一种延迟事件的方法，直到所有指令都在侦听。

这就是我最后做的事情，从Blesh的答案中窃取了很多，但保持了控制器事件和“after load”服务的语义分离。

这允许控制器事件很容易被其他事情所吸引，而不仅仅是聚焦一个特定的元素，还允许只在需要时才引起“after load”功能的开销，在很多情况下可能不是这样。

使用

<input type="text" focus-on="controllerEvent"/>

app.controller('MyCtrl', function($scope, afterLoad) {
  function notifyControllerEvent() {
      $scope.$broadcast('controllerEvent');
  }

  afterLoad(notifyControllerEvent);
});

源

app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on(attr.focusOn, function(e, name) {
        elem[0].focus();
      });
   };
});

app.factory('afterLoad', function ($rootScope, $timeout) {
  return function(func) {
    $timeout(func);
  }
});