Question

我有以下项目：

<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的方式）

Answer 1

看看模糊指令：

http://docs.angularjs.org/api/ng.directive:ngBlur

AngularJS使用下拉菜单的方式

1 个答案: