我有以下项目：
<span ng-click="ui.toggleShow('company')" class="dropdown-trigger">
<i class="icon-building"></i>
</span>
<span ng-click="ui.toggleShow('notifications')" class="dropdown-trigger">
<i class="icon-info"></i>
</span>
...
<dropdown-element ng-show=...>
ui.toggleShow函数位于Controller中的以下对象中：
$scope.ui = {
show: 'nothing',
toggleShow: function(elem) {
if (elem === $scope.ui.show) {
$scope.ui.show = 'nothing';
} else {
$scope.ui.show = elem;
}
}
};
这部分就像它应该的那样工作，但是当我点击这个span标签时，我只能“切换”我的下拉元素。
我试图在父标签中使用这个ui.toggleShow，但是（显然）会一直覆盖这个ui.show属性，所以即使我点击了正确的标签它也变成了'没有'，因为我点击了父节点。
我尽量不在网站中使用任何jQuery或其他DOM操作。
如何通过单击这些span-s来更改我的代码以打开下拉元素，并通过单击其他位置来关闭它们？ （以Angular的方式）