0

Angular 1.2 でボタンがタップ/クリックされたときに ng-view を前後にアニメーション化するためのさまざまな回避策を見てきました。これには、ng-class で使用されるページ/アニメーションにスコープ変数を設定して、ng-view ディレクティブを持つ要素にクラスを設定するメソッドをスコープに設定する必要があります。大規模なアプリでは、これはあまりスケーラブルではないようです。その一部は、コードを複製しないようにコントローラーに挿入するサービス/ファクトリーを作成することだと思います。しかし、ルーターの解決機能でアニメーションの値を設定し、すぐに解決される約束を返すサービスにそれらを送信することができるかどうか本当に疑問に思っています。これにより、ルートが変更される前に ng-view 要素にクラスが設定され、この方法で管理される可能性があります。

ユーザーがどのルートに行くかに応じて、ng-viewのアニメーションを順方向および逆方向に処理するためのより明確な方法を誰かが持っていますか?

4

2 に答える 2

0

これは私が遊んできたコンセプトであり、いくつかのリピーター要素のビュー内で作業することができます。まだアニメーション化するところまでは行っていng-viewませんが、良い出発点になるはずです。

コンセプトはng-animate、各ルート構成にオブジェクトを格納することです。式を必要とせずにスコープ オブジェクトを渡すことができng-animateます。

function Ctrl($scope){
   $scope.ANIM={enter: 'animate-enter', leave: 'animate-leave'};
}

<li ng-animate="ANIM">

構成:

 $routeProvider.when('/foo', {
                controller: 'Ctrl',
                templateUrl:'view1.html',
                anim:{enter: 'skew-enter', leave: 'skew-leave'}
            })

次に、現在のルート構成からアニメーションをrun()リッスンして取得します$routeChangeStart

app.run(function($rootScope){
            $rootScope.anim={enter: 'animate-enter', leave: 'animate-leave'}
            $rootScope.$on('$routeChangeStart', function(event, current){               
                $rootScope.anim=  current.anim 
            })
        })

私のサンドボックスバージョンでは、次のことを行います。

 function Ctrl($scope, $rootScope){
       $scope.ANIM=$rootScope.anim;
    }

繰り返しますが、これはまだ概念実証段階です。同じ ng-animate を持つ 2 つのビューがあり、各コントローラー内$scope.anim=$rootScope.animで機能する場合。

これが役に立てば幸いです...さらに何かを行う場合は興味があります

于 2013-10-30T23:41:22.457 に答える