Question

我正在使用Angular 1.6。面对焦点问题。任何人都可以就此提出建议。

HTML

 <button type="button" data-ng-click="showPan()">   Show</button>
        <div data-ng-if="showPanDiv">
        <input type="text" id="panInputId"/>
   </div>

控制器

在控制器中，我在“showPan”方法中有以下代码。

function showPan(){
   $scope.showPanDiv = true;
   $('#panInputId').focus();
}

但重点不在于输入元素。如果我使用超时，那就像下面的代码一样。

function showPan(){
   $scope.showPanDiv = true;
   setTimeout(function(){
         $('#panInputId').focus();
   }, 100);

}

如果超时时间为零或10，那么它也不起作用。如果时间限制大于或等于100，那么它正在工作。

类似的问题：如果不是ng-if，ng-include面临同样的问题。

有人可以解释为什么它不起作用???或者是否有任何解决方案可以在不使用超时的情况下将焦点集中到输入元素。

提前致谢。

Answer 1

写一个指令：

app.directive('showFocus', function($timeout) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.showFocus, 
      function (newValue) { 
        $timeout(function() {
            newValue && element.focus();
        });
      },true);
  };    
});

并使用它：

<input type="text" ng-show="showPanDiv" show-focus="showPanDiv">

参考link

Answer 2

我猜是时间用ng-if渲染可以忽略焦点问题。尝试使用ng-show并告诉我它是否有效。使用ng-show代替ng-if如果您只想隐藏而不是再次重新渲染。

Answer 3

哈佐克斯写的答案应该是公认的答案。你永远不应该在角度控制器中使用jquery。 指令用于DOM操作。

更多关于为什么指令用于DOM操作：Handle DOM Events the Angular Way Without jQuery

Ng-如果有焦点问题

3 个答案: