AngularJS 关闭一个在 ng-click 上显示的 div

27 浏览
0 Comments

AngularJS 关闭一个在 ng-click 上显示的 div

我创建了一个按钮

点击按钮时显示一个并再次点击时切换回去！

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

然而，当用户点击这个div元素以外的任何地方，我也希望这个元素再次隐藏起来。我应该怎么做？我需要严格使用AngularJS而不使用jQuery。

希望你能帮我解决这个问题。

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

 $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);
  };

我该如何将其调整到我的情况下？！

0

3 答案

0 Comments

AngularJS中，有一个问题是在点击事件中关闭一个显示的div。最简单和最清洁的处理方法是在文档中注册一个事件，当除了div及其子元素外的任何其他元素被点击时，该元素将被移除。

解决这个问题的方法是使用一个服务，该服务在注册点击事件时会处理关闭div的操作。具体的示例代码可以在GitHub的EnzeyNet/Services项目中找到，链接为：https://github.com/EnzeyNet/Services/blob/master/src/nzServices.js。

需要注意的是，这个示例代码中缺少文档说明，但是在注入该服务后，可以按照以下方式使用：

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

以上就是解决AngularJS中关闭显示的div的问题的原因和解决方法。

0
0 Comments

问题的原因是需要在ng-click事件中关闭一个显示的div，但是不知道如何在其他地方点击时关闭div。解决方法是使用ng-init创建一个模型，使用ng-show根据模型的值来显示/隐藏div，并使用ng-click改变模型的值。这样就可以通过点击按钮来改变div的显示与隐藏。如果需要在其他地方点击时关闭div，可以使用事件传播(Event Propagation)的方式，通过在外层div上添加ng-click事件来关闭div。

0
0 Comments

AngularJS关闭一个在ng-click上显示的DIV的原因是DIV失去焦点，解决方法有两种：

1. 如果DIV已经有焦点，可以使用ng-blur指令在DIV上运行set appearOnChoice为false。

2. 如果DIV没有焦点，需要在代码中操作DOM（提供焦点）或创建一个自定义指令来设置焦点，使ng-blur指令起作用。

另外，还可以在视图上的每个可点击对象上添加ng-click指令，以在触发时隐藏DIV，但这不是最佳解决方法。

其中一个基本问题是，当div可见时，点击它后按钮会失去焦点，同时div也不会获得焦点。因此，通过DOM点击设置div的焦点似乎是不可能的。可以尝试给div添加tabindex属性。

参考链接：

- [设置元素焦点的Angular方式](https://stackoverflow.com/questions/25596399)

- [通过tabindex设置div焦点](http://stackoverflow.com/a/148444/2719246)

0