当我从 angularjs 1.1.4 玩 ng-view 和 ng-animate 时，我注意到指令被执行了两次。一次用于进入屏幕的视图中的元素，再次用于离开屏幕的视图中的元素（当视图进入屏幕时，该指令已经为元素执行）。
据我了解，指令应该只对进入屏幕的元素执行，而不是对离开的元素执行。还是我错过了什么？
<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
如您所见，应用程序启动时计数器显示为 1。但如果您开始导航，计数器会增加 2。
干杯迈克尔
编辑
当然，一种解决方法可能是向元素添加一个类并在指令中检查它——但我想这不是应该完成的方式。
link: function ($scope, $element, $attrs) {
if ($element.hasClass('processed')) return;
$element.addClass('processed');
$scope.incrementCount();
}