angularjs - 角度ディレクティブを格納する要素が削除されたときに間隔をクリアする

Question

JavaScript ベースの読み込みアニメーションを追加する簡単なディレクティブを作成しました。window.setInterval()ループで動作しています。これはうまく機能しますが、ロードが完了するとngSwitch、ページからロード ディレクティブ属性を格納する要素を削除するコンテンツをスワップするために使用します。

理想的には、この変化を監視してインターバルをクリアし、アニメーションの計算がバックグラウンドで実行されないようにしたいと考えています。ページ上の要素の存在を評価するカスタム関数を見てみました。関数がこれを検出する際に機能することは知っていますが、タイミングが問題のようです。つまり、私が知る限り$watch、ディレクティブ属性の要素がページを離れると、それ自体がクリアされます。したがって、私$watchの 'ed 式は変更を検出せず、アニメーション間隔関数をクリアするコールバックを呼び出すことはありません。

この種の状況に対処するための推奨パターンはありますか?

私のテンプレートからの関連スニペット:

<div ng-switch on="dataStatus">

  <div ng-switch-when="loading">
    <div loading-spinner></div>
  </div>

  <div ng-switch-when="haveData">
    <!-- data dependent on content we were loading -->
  </div>

</div>

私のディレクティブの簡略版：

myModule.directive('loadingSpinner', function () {
  var updateMySweetAnimation = function (element) { /* ... */ };
  return {
    link: function (scope, iElement, iAttrs) {
      var spinner = window.setInterval(function () {
        updateMySweetAnimation(iElement);
      }, 100);

      scope.$watch(function () {
        return $(document).find(iElement).length;
      }, function (present) {
        if (!present) {
          clearInterval(spinner);
        }
      });
    }
  };
});