Browse: Home » AngularJS

AngularJS

【AngularJS】アニメーションを使用する。

angular本体を読み込んだ後にangular-animateを読み込む。

<script src="angular.js"></script>
<script src="angular-animate.js"></script>

コアモジュールに読み込ませる。

var app = angular.module('app', [
    'ngAnimate'
]);

これで特定のディレクティブにアニメーション用のクラスが自動的に振られるようになるので、それをCSSで制御してあげればOK。

angular1.2.5で有効なディレクティブとアニメーションは下記の通り。

Directive Supported Animations
ngRepeat enter, leave and move
ngView enter and leave
ngInclude enter and leave
ngSwitch enter and leave
ngIf enter and leave
ngClass add and remove
ngShow & ngHide add and remove (the ng-hide class value)

下記例。

■HTML

<div ng-view class="hoge"></div>

■CSS

/* enter 処理の開始値 */
.hoge.ng-enter {}
/* enter 処理の終了値 */
.hoge.ng-enter-active {}
/* leave 処理の開始値 */
.hoge.ng-leave {}
/* leave 処理の終了値 */
.hoge.ng-leave-active {}

Animate.cssと併せて用いるとベスト。

 

2014/06/16 _onichannn , ,

【AngularJS】テンプレートのキャッシュを削除する。

$route.reload()をする時にテンプレートの内容が更新されないことがあるけど
下記のようにキャッシュをクリアしてやれば解決。

$templateCache.removeAll();

下記のようにするとng-viewが更新された際は自動的にキャッシュクリアを行ってくれる模様。

myApp.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

色々と便利だなぁ。

 

2014/06/16 _onichannn , ,

【AngularJS】ng-clickディレクティブに関するメモ。

というかディレクティブ全般に関して。

ディレクティブ（ng-属性）内では通常のテンプレート部分とは違いAngular式の評価が行えるので、
例えばIDをパラメーターとして埋め込みたいときにも{{}}を用いる必要はない。

例。

これはダメ。

<a ng-click="submit({{data.id}})"></a>

これでいい。

<a ng-click="submit(data.id)"></a>

 

2014/06/16 _onichannn , ,

【AngularJS】指定のパスにリダイレクトする。

$locationオブジェクトを用いる。

$location.path('/path');

これで指定したパスに移動することが可能。

$locationオブジェクトの詳細は下記URLが参考になる。

http://js.studio-kingdom.com/angularjs/guide/$location

 

2014/06/16 _onichannn , ,