Question

我写了这个简单的指令：

app.directive('element', [function() {
    return {
        restrict: 'E',
        template: $('#template').html(),
        replace: true,
        link: function($scope) {
            $scope.close = function () {
                $scope.show = false;
            }
        }
    }
}])

在我的页面上可以有几个元素。

<element></element> //element[0]. On click - hide element[1] and element[2]
<element></element> //element[1]. On click - hide element[0] and element[2]
<element></element> //element[2]. On click - hide element[1] and element[0]

当我点击元素[0]（或其他）所有我的＆＃34;元素时，我想要＃34;排除＆＃34;元素[0]＆＃34;变得躲起来我该怎么办？

Answer 1

您不需要指令来执行此操作。例如，您可以简单地使用ng-show，而无需额外的代码。

<div class="elem" ng-show="!selected || selected == 1" ng-click="selected = 1">Element One</div>
<div class="elem" ng-show="!selected || selected == 2" ng-click="selected = 2">Element Two</div>
<div class="elem" ng-show="!selected || selected == 3" ng-click="selected = 3">Element Three</div>

这基本上表示如果没有选择任何元素，则显示所有元素，但只要选择了一个元素（通过点击），只显示它，隐藏其他元素。

Answer 2

请看看这个plunker - http://plnkr.co/edit/hXYgKZceRpsPtXkRN9xy?p=preview

app.directive('element', function($rootScope) {
    return {
        restrict: 'E',
        scope :{
          id : '@',
          text : '@'
        },
        template: '<div ng-click="hideOther()" ng-show="display">{{text}}</div>',
        replace: true,
        link: function($scope,element) {
            $scope.display = true;
            $scope.hideOther = function () {
                $rootScope.$broadcast('elementClicked',{currentId : $scope.id ? $scope.id : ""});

            }
             $scope.$on('elementClicked', function(event,message) {

                     if($scope.id && $scope.id != message.currentId){
                          $scope.display = false;
                     }
              });
        }
    }
})

的index.html

<element id="1" text="Hi1"></element>
<element id="2" text="Hi2"></element>
<element id="3" text="Hi3"></element>

隐藏其他角度指令实例

2 个答案: