AngularJS关闭显示在ng-click上的div答案

【问题标题】：AngularJS closing a div which shows up on ng-clickAngularJS关闭显示在ng-click上的div
【发布时间】：2015-01-30 14:22:45
【问题描述】：

我创建了一个按钮

<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>

点击时会显示<div ng-show=appearOnChoice>，再次点击时会切换回来！

 $scope.chooseOptions=function(){
    $scope.appearOnChoice=!$scope.appearOnChoice;

  }

但是，当用户单击此 div 之外的任何位置时，我还希望此元素再次隐藏元素。我怎样才能做到这一点？我需要严格坚持使用 AngularJS 而不是使用 jQuery。

希望你能帮助我。

编辑：我尝试调整引导日期选择器的一些事件，但我不确定如何正确应用它

 $scope.$on('datepicker.focus', focusElement);
 scope.$watch('isOpen', function(value) {
        if (value) {
          scope.$broadcast('datepicker.focus');
          scope.position = appendToBody ? $position.offset(element) : $position.position(element);
          scope.position.top = scope.position.top + element.prop('offsetHeight');

          $document.bind('click', documentClickBind);
        } else {
          $document.unbind('click', documentClickBind);
        }
      });
  var focusElement = function() {
    $timeout(function() {
      self.element[0].focus();
    }, 0 , false);
  };

我怎样才能适应我的情况？！

【问题讨论】：

标签： html css angularjs angularjs-ng-click ng-show

【解决方案1】：

我觉得不用写函数，可以用ng-init创建模型，ng-show根据模型的值显示/隐藏div，用ng-click改变值的模型。请参见下面的示例：

var myapp = angular.module('myapp',[]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
  <div ng-show="showDiv"> SHOOOOOOOOW </div>
  <button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>

您可以在用户单击其他任何位置时将模型值设置为 false，并在单击按钮时再次将其设置为 true。如果你做了一个小提琴，我可以帮你更轻松:)

【讨论】：

是的，但同样，除非您在每个不是 div 的可点击元素上添加 ng-click="showDiv=false" 指令，否则在单击其他任何地方时如何将其设置为 false？
但是我该如何定义“其他地方”呢？
事件传播，使用适当的 stopPropagation 命令，应该能够通过在外部 div 上单击 ng-click 来做到这一点，但我想我在某处读到 angular 没有正确处理 stopPropagation。不过还没来得及参考。编辑：我的陈述是错误的。 stopPropagation 可以通过 $event 来处理。看看这个答案http://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation
@user3383709 正如 Beartums 所说，您可以通过事件传播实现这一目标，我不知道您的 html/应用程序的确切结构，所以我不确定您必须在哪里添加 ng-click

【解决方案2】：

如果 DIV 有焦点，那么您可以在 DIV 上使用 ng-blur 指令来运行 setappearOnChoice 为 false。但是，如果 DIV 还没有焦点（如果您依赖按钮使其可见，则不会），您将需要在代码中操作 DOM（以提供焦点）或创建自定义指令以设置焦点，以便 ng-blur 指令起作用。使用this link 查看可能的情况。

或者，您可以向视图上的每个可点击对象添加一个 ng-click 指令，该指令将在触发时隐藏 DIV。但我真的不认为这是最好的方法......

【讨论】：

我越来越接近您的解决方案了。模糊当然是个好主意。但是我应该提到，一旦 div 可见并且我单击它，按钮就会失去焦点，同时 div 也不会获得焦点。因此，这种方式似乎是不可能的。
我认为这是基本问题之一。最好通过 DOM 将焦点简单地设置在 div 上。我实际上不确定您是否可以通过单击将焦点设置在 div 上，因为它不是输入元素。编辑：向 div 添加 tabindex 可能会有所帮助。查看this link

【解决方案3】：

处理点击离开的最简单和最干净的方法是在文档上注册和事件，当点击它或其子元素以外的任何元素时，该事件将删除该元素。

有关执行此操作的服务示例，请参阅GitHub EnzeyNet/Services

很抱歉那里缺少文档，但是在注入服务后，您会像这样使用它。

var divElem
nzService.registerClickAwayAction(function() {
    divElem.remove();
}, divElem);

【讨论】：

【解决方案4】：

我只是通过使用 ui 引导下拉菜单解决了这个问题。这带有一个 is-open 选项，并在点击外部时关闭。

【讨论】：