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/
私は次の場所を読んでいませんでした。 "指示はスクリーンに入る要素に対してのみ実行され、残りのものに対しては実行されません。あなたはそれについての参考文献を持っていますか? – lucuma
私はそれを読んでいないが、私はそれを仮定する。ディレクティブが "stage leaving"要素で再度実行されるべきである場合、これは、角を伝える要素に沿った特別な属性である可能性があります(または、要素がステージを離れるときに一度だけ)。例えば、 。要素がステージを離れたときにディレクティブによって生成される "heya、section xyzをシャットダウンする"のようなメッセージです。 –