Question

我有一个带有指令的指令。父指令（expandingTile）单击以展开（通过添加CSS类动画+将boolean expandedTile设置为true），一旦打开，只需单击嵌套指令（detectClick）将关闭expandingTile（假设，通过删除CSS类动画到parent指令expandingTile +将boolean expandedTile重置为false）。

如果我以正确的方式处理这个问题，以及嵌套指令如何在角度中工作，我感到很困惑。任何建议表示赞赏。

<li class="gallery-tile" expanding-tile>
    <section class="inner-tile">
        <!-- not expanded -->
        <p class="tile-title" ng-if="!expandedTile">Not Expanded</p>

        <!-- expanded -->
        <section ng-if="expandedTile">
            <p>Expanded Tile</p>
            <div id="CloseBtn" ng-click="closeTile()" detect-click="dontCloseTile()">X</div>
        </section>
    </section>
</li>

app.controller('TileCtrl', function($scope) {
     $scope.expandedTile = false;
     $scope.closeTile = function() {
         $scope.expandedTile = false;
     };
     $scope.dontCloseTile = function() {
        $scope.expandedTile = true;
     };
});

app.directive('expandingTile', [function() {
    return {
        restrict: 'A',
        controller: 'TileCtrl',
        link: function(scope, elem, attrs) {
            elem.bind('click', function() {
                if(!elem.hasClass('expanded')){
                    elem.addClass('expanded');
                    window.scrollTo(0, 0);
                    //
                    scope.expandedTile = true;
                    scope.$apply();
                } 
            });
        }
    }   
}]);

app.directive('detectClick', ['$document', function($document){
    return {
        require: '^expandedTile',
        restrict: 'A',
        link: function(scope, elem, attrs) {
            elem.bind('click', function(e) {
                e.stopPropagation();
            });
            $document.bind('click', function() {
                scope.$apply(attrs.detectClick);
            });
        }
    }
}]);

Answer 1

找到了解决方案。

<li ng-repeat="project in projects" class="gallery-tile" ng-class="{expanded: expandedTile}" expanding-tile>
    <section class="inner-tile">
        <p ng-show="expandedTile" id="CloseBtn" ng-click="closeTile()" detect-outside-click>X</p>
    </section>
</li>

/* expanding tile */
app.directive('expandingTile', [function() {
    return {
        restrict: 'A',
        controller: function($scope) {
            $scope.closeTile = function(elem) {
                console.log('close tile')
                $scope.expandedTile = false;
            }
        },
        link: function(scope, elem, attrs) {
            elem.bind('click', function(e) {
                if(!elem.hasClass('expanded')){
                    scope.expandedTile = true;
                    scope.$apply();
                }
            });
        }
    }   
}]);

/* detect outside click */
app.directive('detectOutsideClick', ['$document', function($document){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            elem.bind('click', function(e) {
                e.stopPropagation();
            });
            $document.bind('click', function() {
                scope.$apply(attrs.detectOutsideClick);
            });
        }
    }
}]);

angularjs中的嵌套指令

1 个答案: