使用指令使用ng-if？

Question

我想觸發一個按鈕來執行輸入欄的顯示，然後關注它。爲了避免併發症，我發現這個簡單的指令來做重點。

app.directive('autoFocus', function($timeout) { 
    return { 
     restrict: 'AC', 
     link: function(_scope, _element) { 
      $timeout(function(){ 
       _element[0].focus(); 
      }, 0); 
     } 
    }; 
}); 

<input auto-focus type="text"/> 

但現在我不知道如何使用它出現。

Answer 1

在輸入上使用ng-if將解決您的問題。因爲如果使用ng-show，這意味着元素仍然是頁面的一部分，但不可見。但是當條件成立時，ng-if會產生新的元素。運行代碼並檢查自己。

var app = angular.module("myApp",[]); 
 
app.directive('autoFocus', function($timeout) { 
 
    return { 
 
     restrict: 'AC', 
 
     link: function(_scope, _element) { 
 
      $timeout(function(){ 
 
       _element[0].focus(); 
 
      }, 0); 
 
     } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
<button ng-click="showInput = true;" >Show Input</button> 
 
<button ng-click="showInput = false;" >Hide Input</button> 
 
<input auto-focus type="text" ng-if="showInput"> 
 
</div>

這樣，當按鈕使輸入顯示，您可以通過鍵入它的重點是在可以看到。
從ngif documentation

的ngIf指令刪除或重新創建基於一個{表達式} DOM樹 的一部分引用。如果分配給ngIf的表達式將 評估爲false值，則將該元素從DOM中移除，否則將該元素的一個 克隆重新插入到DOM中。