jquery - 角度アニメーション

Question

現時点では、このコード行が ng-click コントローラーにあります

$(".message").show(300).delay(900).hide(300);

そして、それはまったく問題なく動作しますが、コントローラー内からアニメーション/ jQuery / DOM操作を決して実行してはならないと言われました。ばかげた量のいじりを伴わない、これを行う別の方法はありますか?

Answer 1

その属性を監視する簡単なディレクティブを作成します。

app.directive('animateMe', function() {
   return function(scope, element, attrs) {
      scope.$watch(attrs.animateMe, function() {
         element.show(300).delay(900).hide(300);
      })
   }
})

アニメーション化する HTML 要素にそのディレクティブを配置します。ng-click でモデル/スコープ プロパティを切り替えます。

<a ng-click="animateToggle = !animateToggle">animate</a>
<div animate-me="animateToggle">...</div>

より多くのコード、はい。しかし、これで再利用可能なものになりました (そしてセレクターは必要ありません)。

フィドル

フィドルでは、最初に表示されないように ng-hide を div に追加しました。

---

更新:
Angular 1.1.4 にはngAnimateディレクティブが追加されました。独自のアニメーション ディレクティブを記述するほど柔軟ではありませんが、多くのシナリオを処理できます。ng-show (および ng-hide) ディレクティブは、showおよびhide アニメーション メソッドをサポートします。