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 />

Answer 3

在koolunix的答案的基础上，如果你只是想要聚焦输入元素，找到第一个输入元素也是有用的，它是具有焦点指令的元素的子元素。

这对于外部库使用指令和模板抽象输入元素非常有用。

.directive('focusOn', function ($timeout) {
    return {
        restrict: 'A',
        priority: -100,
        link: function ($scope, $element, $attr) {

            $scope.$watch($attr.focusOn,
                function (_focusVal) {
                    $timeout( function () {
                        var inputElement = $element.is('input')
                            ? $element
                            : $element.find('input');

                         _focusVal ? inputElement.focus()
                                   : inputElement.blur();
                    });
                }
            );

        }
    };
});

Answer 4

你必须在你的控制器中使用超时才能在之前渲染这是一个类似的例子，其中一个默认隐藏的搜索框

HTML：

<input ng-show="vm.isActive" id="searchInputBox" ></input>
<input type="button" ng-click="vm.toggleActiveInactive();">

控制器：

vm.isActive=false;
vm.toggleActiveInactive=toggleActiveInactive; // vm= viewmodel

function toggleActiveInactive() {
          if(vm.isActive==true){
            vm.isActive=false;
          }else{
            vm.isActive=true;

            $timeout(function(){     
              document.getElementById('searchBoxInput').focus()
            }, 10 );

          }
        }

Answer 5

Angular.io的另一个版本

Route::get('/', function()
{
    if( Auth::check() ) {
        return app()->make('App\Http\Controllers\SchoolController')->callAction('index', []);
    } else {
        return app()->make('App\Http\Controllers\AuthSchoolController')->callAction('index', []);
    }    
});

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

5 个答案: