在ng-show之后将焦点设置在输入字段上

Question

一旦数据加载(在这种情况下通过$ resource),是否可以通过控制器设置输入字段的焦点？

输入通过ng-show隐藏,直到从API返回数据,但我找不到将注意力设置在输入上的方法.我知道输入的ng-model名称和输入名称,这意味着我可以通过jQuery来完成它,但我宁愿在可能的情况下使用AngularJS方式.

我在这里尝试过很多指令性示例,但它们似乎都是1.2 ng之前的焦点,首先依靠按钮点击按钮(在我的情况下不会发生)或者只是不起作用.
非常感谢任何提示.

Answer 1

这是一个可能适合您的简单指令

<input focus-on="!!myResourceData" />

.directive('focusOn',function($timeout) {
    return {
        restrict : 'A',
        link : function($scope,$element,$attr) {
            $scope.$watch($attr.focusOn,function(_focusVal) {
                $timeout(function() {
                    _focusVal ? $element[0].focus() :
                        $element[0].blur();
                });
            });
        }
    }
})

Answer 2

我已经将答案扩展到使用角度ng-show和ng-hide

app.directive('focusOnShow', function($timeout) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attr) {
            if ($attr.ngShow){
                $scope.$watch($attr.ngShow, function(newValue){
                    if(newValue){
                        $timeout(function(){
                            $element[0].focus();
                        }, 0);
                    }
                })      
            }
            if ($attr.ngHide){
                $scope.$watch($attr.ngHide, function(newValue){
                    if(!newValue){
                        $timeout(function(){
                            $element[0].focus();
                        }, 0);
                    }
                })      
            }

        }
    };
})

您只需要添加属性即可 focus-on-show

<input type="text" ng-show="editing" focus-on-show />