2

タイトルとして、このフィドルを参照してください。

http://jsfiddle.net/goodwill/ezNuj/

次のコードでディレクティブを追加しました。

myApp.directive('ngFadeIn', function() {
  return function(scope, element, attr) {
    if (element.is('tr, tbody')) {
      element.find('td').effect("highlight", {}, 500);
    } else {
      element.effect("highlight", {}, 500);
    }
    return scope.destroy = function(complete) {
      return element.fadeOut(500, function() {
        if (complete) {
          return complete.apply(scope);
        }
      });
    };
  };
});

私が抱えている問題は、ページが最初にロードされたときです.ng-repeat要素にディレクティブを適用したため、ページが最初にロードされたときにすべてのアイテムがハイライト効果(1回点滅)を取得しました. あまりハックせずにこの効果をスキップするにはどうすればよいですか (理想的には、ディレクティブ内ですべてが行われます)。

4

4 に答える 4

0

ページが初めてレンダリングを終了した時期を判断できれば、サービスまたはrootScopeにプロパティを設定して、ディレクティブが挿入できるようにすることができます。したがって、このプロパティを調べて、アニメーションを適用するかどうかを判断します。

残念ながら、ページのレンダリングがいつ終了したかを判断する方法はないようです。同じ問題に対処しているAngularJS-ディレクティブレンダリングが完了したときにDOMをクエリする方法を参照してください。

私が考えることができる唯一の回避策は、$ timeoutを使用して1秒程度遅延させる別のディレクティブを作成し（ページで1回使用）、次に上記のことを実行することです。サービスまたはrootScopeにプロパティを設定します。あなたのfadeInディレクティブはそのプロパティ/変数を$watchし、値が変更されると、アニメーションを許可または禁止するローカルプロパティ/ブール/フラグを設定できます。

于 2013-02-24T04:20:13.590 に答える
0

興味深いことに、これに対する単純でクリーンな解決策があるかどうかはわかりません。ngRepeatDirective は、リピーターが初めて実行されているか、リストに新しいアイテムを追加しているだけかを気にしないように構築されているようです。そのため、それに応じて異なるアクションを実行することはできません。AngularUI の ui-animate ディレクティブもこの問題を解決していないようです。そのため、厄介なタイムアウトに頼ることなく、これが今すぐ実行できるかどうかはわかりません。

できることは、ngRepeatDirective を変更してng-repeat-finished属性のようなものをチェックし、リピーターが終了した後にそれを実行することです。次に、最初のリピーターでアニメーションを回避するロジックを追加するのは簡単です。

ところで、ディレクティブに ng 接頭辞を付けるべきではありません。これは Angular が内部的に使用するものだからです。アプリケーションの独自のプレフィックスを考え出す必要があります。

于 2013-02-22T08:04:03.267 に答える