Question

我知道问题已被多次询问，但我似乎无法在任何地方找到如何从控制器内聚焦到元素。什么是最好的方法？做指令会更好吗？但如果是这样，那么我将如何在我的控制器中调用它？或者，创建服务更好吗？

我已经拥有并在HTML代码中正常工作的指令是：

.directive('ngxFocus', ['$timeout', function($timeout) {
    return function(scope, element, attr) {
        $timeout(function () { 
            element.focus();
         }, 10);
      };    
}])

我可以在控制器内调用指令吗？我还在学习AngularJS，我对这种情况下最好的方法有点困惑。我真的想通过控制器来做，目前我使用一个简单的1行jQuery来聚焦，但是，它不是Angular的方式，所以我想以正确的方式去。

的注意
更具体的一个例子，假设我在HTML中有10个输入，让我们说在执行函数内部（在控制器中定义），我想直接从函数中关注多个输入中的一个（再次这都是在控制器内声明的）。如果可能的话，我宁愿不在HTML代码中写任何内容，而是调用焦点函数或将重点放在我选择的输入上的东西。我知道我可以用$('input12').focus();简单地在jQuery中编写它，但我想知道如何以AngularJS方式实现它。到目前为止我得到的所有答案都是基于编写一个指令，这也等于在HTML中写一些东西，是不是有其他办法？

的实施例
有关我的表单的更明确的示例...我有一个连接到Yahoo Web服务（股票市场）的第一个输入，用户填写的这个输入将持有一个股票报价符号，可以在世界上的任何地方，然后用户将选择（从下拉列表）他的银行账户...现在，我的控制人将检查股票报价市场是否与用户的银行账户货币相同（例如：GOOG是美国货币，如果用户的账户是$ CAD，它将失败，因为GOOG是$ USD）。如果货币不一样，我想建议我的用户并且这样做我真的更愿意专注于该领域，这样如果他犯了错误就可以改变他的符号。

Answer 1

我正在尝试使用控制器中的元素，确保您出错，控制器的目标是将从服务接收的数据绑定到视图，而不是操纵视图。<登记/> 如果您想关注路线变化的元素：

app.directive('focuser', ['$location', function ($location) {
  return {
    restrict: 'A',
    link: function ($scope, $element) {
      $scope.$watch(function () {
        //simply focus
        $element.focus();
        //or more specific
       if ($location.$$url == '/specific/path') {
         $element.focus();
       }
      });
    }
  };
}]);

Answer 2

我已经制定了这个指令：

app.directive('rfocus',function(){
    return {
        restrict: 'A',
        controller: function($scope, $element, $attrs){
            var fooName = 'setFocus' + $attrs.rfocus; 
            $scope[fooName] = function(){
                $element.focus();                
            } 
        },
    }    
});

它添加到控制器的$scope函数以设置对元素的关注。函数的名称基于属性中给出的值。

使用：<input type="text" rfocus="Input1"/>将创建您可以在控制器中使用的函数setFocusInput1()。

这是小提琴：http://jsfiddle.net/aartek/2PJMQ/

Answer 3

我最近也开始学习Angular，但希望我能为你提供一种不同的方式来接近它。

我一直在使用一些基本的jQuery来关注，所以在这方面，我无法真正帮助你。但是，关于在控制器中调用指令，我找不到任何说“是，你可以”或“不，你不能”的文章。我知道你可以在一个指令中声明一个控制器，所以你可以做到这样的事情：

.directive('ngxFocus', function() {
    return {
        restrict: 'A',
        controller: //do your controller stuff here
}])

Answer 4

我知道这是一个老问题，但这是另一种方法，你在控制器中将变量设置为true，并且这个动作将焦点设置为元素

试试这个：

myAngularModule.directive('goFocus', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.goFocus, function (newValue) {
                if (newValue) {
                    $timeout(function () {
                        element[0].focus();
                    }, 100);
                }
            });
            element.bind("blur", function (e) {
                $timeout(function () {
                    scope.$apply(attrs.goFocus + "=false");
                }, 10);
            });
            element.bind("focus", function (e) {
                $timeout(function () {
                    scope.$apply(attrs.goFocus + "=true");
                }, 10);
            });
        }
    }
}]);

在HTML模板中：

<input go-focus="focusvar1" type="text" ng-model="mytext1" />
<input go-focus="focusvar2" type="text" ng-model="mytext2" />
<input go-focus="focusvar3" type="text" ng-model="mytext3" />
<button ng-click="doFocus()">OK</button>

在javascript角度控制器中：

myAngularModule.controller('myController', function () {
    var self = this;

    self.doFocus = function () {
        // do some logic and focus your field
        self.focusvar2 = true;
    };
});

AngularJS - 如何通过控制器专注于元素

4 个答案: