我有以下物品：
<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;
}
}
};
这部分就像它应该的那样工作，但是当我点击这个跨度标签时，我只能“切换”我的下拉元素。
我试图ui.toggleShow在父标签中使用它，但是（显然）一直覆盖这个 ui.show 属性，所以即使我点击了正确的标签，它也变成了“无”，因为我点击了父标签。
我尽量不在站点中使用任何 jQuery 或其他 DOM 操作。
我应该如何更改我的代码以通过单击这些跨度来打开下拉元素，并通过单击其他任何地方来关闭它们？（以角度方式）