一个简单的情态动词:

.directive('focusMeNow', ['$timeout', function ($timeout)
{
    return {
        restrict: 'A',

        link: function (scope, element, attrs)
        {


            $timeout(function ()
            {
                element[0].focus();
            });



        }
    };
}])

例子

<input ng-model="your.value" focus-me-now />

这工作得很好，并以一种角度的方式来聚焦输入控件

angular.element('#elementId').focus()

虽然这不是一种纯粹的角方式来完成任务，但语法遵循了角风格。Jquery使用Angular间接和直接访问DOM (jQLite => Jquery Light)。

如果需要，这段代码可以很容易地放在一个简单的角指令中，其中element可以直接访问。

首先，关注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/

当打开一个模态时，将焦点设置在这个模态内预定义的<input>上。

定义一个指令，并让它$watch一个属性/触发器，这样它就知道什么时候聚焦元素:

Name: <input type="text" focus-me="shouldBeOpen">

app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        //scope: true,   // optionally create a child scope
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                console.log('value=', value);
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
            // to address @blesh's comment, set attribute value to 'false'
            // on blur event:
            element.bind('blur', function () {
                console.log('blur');
                scope.$apply(model.assign(scope, false));
            });
        }
    };
}]);

砰砰作响

$timeout似乎需要给模态渲染时间。

“2”。每次<input>变为可见时(例如，通过单击某个按钮)，将焦点设置在它上。

创建一个本质上类似于上面的指令。观察某些作用域属性，当它为真时(在ng-click处理程序中设置它)，执行元素[0].focus()。根据你的用例，你可能需要也可能不需要$timeout:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.focusMe, function(value) {
        if(value === true) { 
          console.log('value=',value);
          //$timeout(function() {
            element[0].focus();
            scope[attrs.focusMe] = false;
          //});
        }
      });
    }
  };
});

砰砰作响

更新7/2013:我见过一些人使用我最初的隔离作用域指令，然后在嵌入输入字段(即模态中的输入字段)方面出现问题。没有新的作用域(或者可能是新的子作用域)的指令应该可以减轻一些痛苦。所以上面我更新了答案，不使用隔离作用域。以下是原始答案:

原来答案是1。，使用隔离作用域:

Name: <input type="text" focus-me="{{shouldBeOpen}}">

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '@focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === "true") { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
    }
  };
});

砰砰作响。

原来答案是2。，使用隔离作用域:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" focus-me="focusInput">
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '=focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === true) { 
          //console.log('trigger',value);
          //$timeout(function() {
            element[0].focus();
            scope.trigger = false;
          //});
        }
      });
    }
  };
});

砰砰作响。

由于我们需要重置指令中的trigger/focusInput属性，'='用于双向数据绑定。在第一个指令中，'@'就足够了。还要注意，当使用“@”时，我们将触发器值与“true”进行比较，因为@总是会导致字符串。

下面的指令对我来说很管用。对输入使用相同的autofocus html属性。

.directive('autofocus', [function () {
    return {
        require : 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.focus();
        }
    };
}])

这也可以使用ngModelController。使用1.6以上版本(不知道是否使用旧版本)。

HTML

<form name="myForm">
    <input type="text" name="myText" ng-model="myText">
</form>

JS

$scope.myForm.myText.$$element.focus();

--

注意:根据上下文的不同，您可能需要封装一个超时函数。

注意²:当使用controllerAs时，这几乎是相同的。只需将name="myForm"替换为name="vm "。在JS中，vm.myForm.myText.$$element.focus();。