嵌套指令AngularJS发生了奇怪的事情

Question

我遇到嵌套指令的问题，特别是在hide-element指令中。

首先，有一个编辑模式指令似乎不适用于ngAnimate。它仍然会按下按钮上的命中addClass淡入淡出，但不会有ng-animate绑定。

我尝试将hide-element移动到divColumn的兄弟元素，edit-element指令工作，并在两个按钮和divColumn上执行动画。

它们嵌套时不起作用。那是为什么？

（我是AngularJS的新手，请赐教我）

HTML

<!-- ngview has UIController everything here is nested within ngview -->

<h3>Data Page</h3>

<div class="divContainer" ng-mouseenter="fadeToggle()" ng-mouseleave="fadeToggle()">
<div style="overflow:hidden">
    <div class="divHeader">Data Name</div>
    <div class="divHeader">Parent Data</div>
    <div class="divHeaderHidden" hide-element="isHidden">Edit</div>
</div>
<div ng-controller="myController">
    <div ng-repeat="data in datas">
        <div class="divRow" ng-mouseenter="fadeToggle();" ng-mouseleave="fadeToggle();">
            <div class="divColumn">
                {{data.name}} 
            </div>
            <div class="divColumn">
                {{data.parentData.name}}
            </div>
            <div class="divColumnHidden" hide-element="isHidden">
                <button class="editColumnBtn" ng-click="editToggle()" edit-mode="isEdit">Edit</button>
                <button class="removeColumnBtn" edit-mode="isEdit">Remove</button>
            </div>
        </div>
    </div>
</div>

角

app.factory('Data', function($http) {
    var dataService = {
        getDepartment: function() {
            var promise = $http.get('http://localhost/orgchart/app/json/data').then(function(response) {
                return response.data;
            });
            return promise;
        }
    };
    return dataService;
});

app.controller('UIController', ['$scope', function fadeController($scope) {
    $scope.fadeToggle = function () {
        this.isHidden = !this.isHidden;
    };
}]);    

app.controller('myController', ['$scope', 'Data', function myController($scope, Data) {
    Data.getData().then(function(data) {
        $scope.data = data;
    });
        $scope.editToggle = function() {
        this.isEdit = !this.isEdit;
    };
}]);

app.directive('editMode', ['$animate', function ($animate) {
    return function(scope, element, attrs) {
        scope.isEdit = false;
        scope.$watch(attrs.editMode, function (newVal) {
            if(newVal) {
                $animate.addClass(element, 'fade');
            }
            else {
                $animate.removeClass(element, 'fade');
            }
        });
    };
}]);

app.directive('hideElement', ['$animate', function ($animate) {
    return function(scope, element, attrs) {
        scope.isHidden = true;
        scope.$watch(attrs.hideElement, function (newVal) {
            if(newVal) {
                $animate.addClass(element, 'fade');
            } else {
                $animate.removeClass(element, 'fade');
            }
        });
    };
}]);

app.animation(".fade", function() {
    return {
        addClass: function(element, className) {
            TweenMax.to(element, 0.3, {opacity: 0});
        },
        removeClass: function(element, className) {
            TweenMax.to(element, 0.3, {opacity: 1});
        }
    };
});