ng-view和ng-animate执行指令两次

Question

当我正在使用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();
}

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

Answer 1

它将针对指令处理的每个事件触发该指令。看看这个小提琴，如果您删除离开事件，它只会触发一次。

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

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

请注意文档中说“event1和event2属性指的是特定于已分配指令的动画事件。”（http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate）

它本质上是说，您可以使用并非所有指令中都存在的自定义事件来构建指令，并且动画器服务将允许您的指令知道当这些事件在您的指令中触发时要运行哪些动画。然而，这意味着您的指令可能会针对 ng-animate 属性中处理的每个事件执行。因此，当您配置进入和离开时，指令都会为它们执行。

我实际上没有编写任何代码来测试这一点，这只是我对文档的解释，jsfiddle 似乎证实了一般前提。