2013-04-23 6 views
9

ng-viewとng-animateでangeljs 1.1.4から再生していましたが、指示が2回実行されていました。画面に入るビュー内の要素に対してもう一度、そして画面を離れるビュー内の要素に対して(ビューが画面に入ったときに、その要素に対してすでに実行されていた間に)繰り返されます。ng-viewはng-animateと一緒に指令を2回実行します。

私の理解のために、ディレクティブはスクリーンに入る要素に対してのみ実行され、残りのものに対しては実行されません。または私は何かが不足していますか?

<div ng-app="app"> 
    <div ng-controller="AppCtrl"> 
     <div class="btn-group"> 
      <a class="btn btn-primary" href="./">foo</a> 
      <a class="btn btn-primary" href="bar/">bar</a> 
     </div> 
     <span class="btn btn-success">{{count}}</span> 
     <div class="view" ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div> 
    </div> 
</div> 
var app = angular.module('app', []); 

app.config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/', { 
      template: '<h1 color>foo</h1>' 
     }) 
     .when('/bar', { 
      template: '<h1 color>bar</h1>' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 

    $locationProvider.html5Mode(true); 
}); 

app.controller('AppCtrl', function ($scope) { 
    $scope.count = 0; 
    $scope.incrementCount = function() { 
     $scope.count++; 
    } 
}); 

app.directive('color', function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attrs) { 
      // executed once the app inits but 
      // twice when you change the view 
      $scope.incrementCount(); 
     } 
    } 
}); 

私はセットアップあなたが見ることができるように、このhttp://jsfiddle.net/mediastuttgart/f4FPj/1/

ためjsfiddleをしたアプリはINITSとき、カウンタが1を言います。あなたがナビゲートし始める場合は、2

歓声もちろんの マイケル

EDIT

によるカウンタの増分は、この問題を回避するには、要素にクラスを追加し、ディレクティブで、それをチェックすることができ - しかし、それはそれが達成されるべき方法ではないと思います。

link: function ($scope, $element, $attrs) { 
    if ($element.hasClass('processed')) return; 
    $element.addClass('processed'); 
    $scope.incrementCount(); 
} 

http://jsfiddle.net/mediastuttgart/f4FPj/2/

+0

私は次の場所を読んでいませんでした。 "指示はスクリーンに入る要素に対してのみ実行され、残りのものに対しては実行されません。あなたはそれについての参考文献を持っていますか? – lucuma

+0

私はそれを読んでいないが、私はそれを仮定する。ディレクティブが "stage leaving"要素で再度実行されるべきである場合、これは、角を伝える要素に沿った特別な属性である可能性があります(または、要素がステージを離れるときに一度だけ)。例えば、 。要素がステージを離れたときにディレクティブによって生成される "heya、section xyzをシャットダウンする"のようなメッセージです。 –

答えて

2

ハンドルをディレクティブ各イベントのディレクティブを発射するだろう。このフィドルを見て、離脱イベントを削除すると、一度だけ発動します。

<div class="view" ng-view ng-animate="{enter: 'view-enter'}"></div> 

http://jsfiddle.net/WmSP8/1/

お知らせドキュメントは、「イベント1とイベント2の属性が割り当てられているディレクティブに特定のアニメーションイベントを参照してください。」と言う(http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate

それは基本的にあなたができることを言っていますすべてのディレクティブにカスタムイベントが存在しないディレクティブを作成し、アニメータサービスはディレクティブでこれらのイベントが発生したときに実行するアニメーションを指示することができます。しかし、これは、あなたの指示がng-animate属性で扱われるイベントごとに実行される可能性があることを意味します。したがって、enterとleaveの両方を設定すると、そのディレクティブが両方とも実行されます。

これをテストするためのコードは実際には書かれていませんが、これはドキュメントの解釈であり、jsfiddleは一般的な前提を確認しているようです。

+0

これは意味がありますが、私はまだこれの全体的な論理を理解することはできません。 "view-enter"で要素の色を赤に変えなければならないディレクティブがある場合、要素が既に赤色に着色されているため、要素がビューを離れるときにこのコードを再度実行する必要があります。それはあなたが入力と退室の間に指示を内部で区別することができれば意味をなさないでしょう。したがって、あなたは "view-enter"で赤色に、 "view-leave"で緑色に変えることができます。 –

+0

私の現在のアプリケーションと私は、 '$ element.hide()'でlinkFnによって隠されるドロップダウン指令を持っています。ユーザーがボタンをクリックすると、メニューがスライドします。ユーザがメニュー内のリンクをクリックすると、メニューをスライドさせるオプションはありません。ディレクティブが再び実行され、即座に '$ element.hide()'が実行されるからです。 –

+0

あなたは苦労しているあなたのメニューコードを投稿できますか? –

関連する問題