只是顺便送点咖啡。

app.directive 'ngAltFocus', ->
    restrict: 'A'
    scope: ngAltFocus: '='
    link: (scope, el, attrs) ->
        scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv

当打开一个模态时，将焦点设置在这个模态内预定义的<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”进行比较，因为@总是会导致字符串。

如果你只是想要一个简单的焦点，由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();
                });
            });
        }
    }
});

如果你想把焦点设置在特定的元素上，你可以使用下面的方法。

创建一个名为focus的服务。 angular.module(“应用程序”) .factory('focus'， function ($timeout， $window) { 返回函数(id) $timeout(函数){ var element = $window.document.getElementById(id) 如果(元素) element.focus (); })； }; })； 将它注入到您希望调用的控制器中。 调用此服务。

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);
  }
});

我想在寻找一个更好的解决方案，但没有找到它，而是不得不创造它之后，为这个讨论做出贡献。

标准: 1. 解决方案应该独立于父控制器范围，以增加可重用性。 2. 避免使用$watch来监视某些条件，这既缓慢，又增加了摘要循环的大小，并且使测试更加困难。 3.避免$timeout或$scope.$apply()触发摘要循环。 4. input元素出现在使用Directive打开的元素中。

这是我最喜欢的解决方案:

指令:

.directive('focusInput', [ function () {
    return {
        scope: {},
        restrict: 'A',
        compile: function(elem, attr) {
            elem.bind('click', function() {
                elem.find('input').focus();                
            });
        }        
    };
}]);

Html:

 <div focus-input>
     <input/>
 </div>

我希望这篇文章能帮助到一些人!