Angularjs 隐藏其他角度指令实例

我写这个简单的指令：

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]。单击-隐藏元素[1]和元素[2]
//元素[1]。单击-隐藏元素[0]和元素[2]
//元素[2]。单击-隐藏元素[1]和元素[0]

我希望当我单击元素[0]（或其他）时，我的所有“元素”（不包括“元素[0]）都会隐藏起来。

---

我怎么做呢？

您不需要指令就可以做到这一点。例如，您可以简单地使用

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>

元素一
要素二
要素三

---

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

请看一看这个小玩意儿-

app.directive（'element'，function（$rootScope）{
返回{
限制：'E'，
范围：{
id:“@”，
正文：“@”
},
模板：“{text}}”，
替换：正确，
链接：功能（$scope，element）{
$scope.display=true；
$scope.hideOther=函数（）{
$rootScope.$broadcast（'elementClicked'，{currentId:$scope.id？$scope.id:'}）；
}
$scope.$on（'elementClicked'，函数（事件、消息）{
如果（$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> 

---

为什么不使用ng show和ng hide来显示已存在于angular中的属性

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