Javascript 有焦点问题的Ng if

我使用的是Angular 1.6。面对焦点问题。有谁能对此提出建议吗

HTML

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

但重点不是输入元素。如果我使用timeout，那么它将运行，如下代码所示

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

}

如果超时时间为0或10，则它也不工作。如果时间限制大于或等于100，则它正在工作

类似问题：如果不是ng如果，ng包括面临相同问题

有人能解释为什么它不起作用吗？？？或者，是否有任何解决方案可以在不使用超时的情况下将焦点转移到输入元素

---

提前感谢。

写一个指令：

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

---

参考

我猜ng在渲染时所花的时间忽略了焦点问题。尝试使用ng show并让我知道它是否有效。

---

如果只想隐藏而不想再次重新渲染，请使用ng show而不是ng

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

---

关于为何使用指令进行DOM操作的更多信息：

我在div中有多个输入框，并动态选择第一个元素。在该设置之后，聚焦到第一个元素。这段代码对我的解决方案没有帮助。这也不是一个好主意，有$watch是的，它会工作的很好。该指令是供全球使用的。我试图理解它不起作用的原因？

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