1

我遇到了嵌套指令的问题，尤其是在 hide-element 指令中。

首先，有一个编辑模式指令似乎不适用于 ngAnimate。它仍然会在按钮上点击 addClass fade ，但不会绑定 ng-animate 。

我尝试将隐藏元素移动到 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});
        }
    };
});
4

0 回答 0