タイムアウトを使用してカスタムディレクティブ要素を表示および非表示にする

Question

親コントローラからスコープを継承するディレクティブがあります。ディレクティブは、div要素で、3秒間ページをオーバーレイし、上/下矢印ボタンがクリックされない限り消えます。 div要素は、一種のモーダルとして機能します。これは私のDOM

HTML

<div ng-show="volumeVisibility"> 
    <display-volume-modal></display-volume-modal> 
</div> 

デフォルト設定はfalseで上のコードです。 volumeVisibility === trueの場合、ボタンをクリックするとディレクティブが表示されます。ここまでは順調ですね。これらは私のコントローラに2つの関数です：

$scope.volumeVisibility = false; 

$scope.timer = function(){ 
    console.log("Timer"); 
    $scope.volumeVisibility = false; 
}; 

$scope.displayVolumeModal = function(){ 
    $scope.volumeVisibility = true; 
    console.log("modal"); 
}; 

タイムアウト作品や$scope.volumeVisibility === falseを設定します。ただし、divはページから削除されません。 Iディレクティブまたはコントローラに各機能を入れてみた

return { 
    restrict: 'E', 
    scope: false, 
    link: function(scope, elem, attrs){ 
     scope.$watch('volumeVisibility', function(newVal, oldVal){ 
      if (newVal === true){ 
       window.setTimeout(scope.timer, 3000);   
       document.addEventListener('keydown', function(e){ 
        //stuff 
        switch (e.which) {    
         case 38: 
          //stuff 
          break; 
         case 40: 
          //stuff 
          break; 
        } 
       }); 
      } 
     }, true); 
    }, 
    templateUrl: 'public/templates/displayVolumeModal.html' 
} 

：ここでディレクティブ（私は無関係な部分を削除した）からのコードです。このディレクティブのDIV要素をタイムアウト後に消滅させるには、どのような手順が必要ですか？

Answer 1

ダイジェストサイクルが呼び出されなかったために何も起こりません。

同期を更新するには、ダイジェストサイクルを実行する必要があります。この場合、setTimeoutではなく$timeoutサービスを使用することができます。 $タイムアウトサービスの

利点：

• ユニットテスト可能あなたが

Answer 2

window.setTimeout(scope.timer, 3000);は角digestサイクルを呼び出すことはありません、タイムアウトに渡された関数の後

$ダイジェストサイクルが開始され、そうwatch doesnの」変更を参照してください。代わりに、このような

使用し、角度の$timeoutサービス：

$timeout(scope.timer, 3000); 

内部的にはwindow.setTimeoutと同じように行いますが、digestが後に呼び出されますことを、確認します。

詳細については、angular digest cycleを参照してください。変数が変更された場合の角度の確認方法特にIntegration with the browser event loop章。

Answer 3

ng-showとng-hideを使用すると、適用される特定のhtml要素の表示が非表示になります。 ng-hideかng-showのどちらであっても、要素はDOM内に存在します。 これが、ディレクティブが呼び出されていない理由です。

あなたはディレクティブを呼び出したい場合は毎回、それは単に代わりにNG-ショーのNG-場合を使用し、画面に表示されます。