我认为这个指令是不必要的。使用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()强制一个摘要循环

我编辑Mark Rajcok的focusMe指令，在一个元素中实现多个焦点。

HTML:

<input  focus-me="myInputFocus"  type="text">

在AngularJs控制器中:

$scope.myInputFocus= true;

AngulaJS指令:

app.directive('focusMe', function ($timeout, $parse) {
    return {
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                if (value === true) {
                    $timeout(function () {
                        scope.$apply(model.assign(scope, false));
                        element[0].focus();
                    }, 30);
                }
            });
        }
    };
});

你可以创建一个指令，将焦点集中在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处理中。

对于那些使用Bootstrap插件的Angular用户:

http://angular-ui.github.io/bootstrap/#/modal

你可以挂钩到模态实例的开放承诺:

modalInstance.opened.then(function() {
        $timeout(function() {
            angular.element('#title_input').trigger('focus');
        });
    });

modalInstance.result.then(function ( etc...

首先，关注1.1的路线图是一种正式的方式。同时，您可以编写一个指令来实现设置焦点。

其次，在一个项目变得可见之后设置焦点，目前需要一个变通方法。只是用$timeout延迟对元素focus()的调用。

因为同样的控制器-修改- dom问题存在于焦点，模糊和选择，我建议有一个ng-target指令:

<input type="text" x-ng-model="form.color" x-ng-target="form.colorTarget">
<button class="btn" x-ng-click="form.colorTarget.focus()">do focus</button>

Angular线程在这里:http://goo.gl/ipsx4，更多细节在这里:http://goo.gl/4rdZa

下面的指令将在你的控制器中创建一个由ng-target属性指定的.focus()函数。(它也创建了.blur()和.select()。)演示:http://jsfiddle.net/bseib/WUcQX/

如果你只是想要一个简单的焦点，由ng-click控制。

Html:

<input ut-focus="focusTigger">

<button ng-click="focusTrigger=!focusTrigger" ng-init="focusTrigger=false"></button>

指令:

'use strict'

angular.module('focus',['ng'])
.directive('utFocus',function($timeout){
    return {
        link:function(scope,elem,attr){
            var focusTarget = attr['utFocus'];
            scope.$watch(focusTarget,function(value){
                $timeout(function(){
                    elem[0].focus();
                });
            });
        }
    }
});