Question

我正在尝试隐藏模糊的DIV（焦点已从DIV中移除）。我正在使用角度和引导程序。到目前为止，我已经尝试过设置＆＃34;焦点＆＃34;显示时DIV上显示，然后当用户点击屏幕上的任何其他位置时显示ng-blur功能。这不起作用。

基本上问题是我无法将注意力集中在我的＆＃34; #lockerBox＆＃34;通过JS，我的＆＃34; hideLocker＆＃34;当我的DIV点击它时，功能没有问题。

<div class="lock-icon" ng-click="showLocker(result); $event.stopPropagation();"></div>
<div ng-show="result.displayLocker" id="lockerBox" ng-click="$event.stopPropagation();" ng-blur="hideLocker(result)" tabindex="1">

  $scope.displayLocker = false;
  $scope.showLocker = function ( result ) {

    $scope.displayLocker = !$scope.displayLocker;
    node.displayLocker = $scope.displayLocker;

    function setFocus() {
      angular.element( document.querySelector( '#lockerBox' ) ).addClass('focus');
    }

    $timeout(setFocus, 100);
  };


  $scope.hideLocker = function ( node ) {
    $scope.displayLocker = false;
    node.displayLocker = $scope.displayLocker;
  };

Answer 1

只需将tabindex="-1" attr添加到div，就会给它提供与输入相同的行为 -

<div tabindex="-1" ng-blur="onBlur()"></div>

https://jsfiddle.net/ast12nLf/1/

（灵感来自此处 - https://stackoverflow.com/a/17042452/831294）

Answer 2

我最终只是在具有onclick的元素上设置模糊事件。

Answer 3

即使我遇到了同样的问题 - 但能够使用＆＃39; mouseup＆＃39;来解决问题。以下是自定义指令中整个文档的事件代码，我使用ng-show（）=＆＃34;变量＆＃34;来切换包含在div中的手风琴作为弹出窗口。现在这个变量是菜单切换按钮HTML元素，div弹出HTML元素以及处理鼠标的自定义指令的关键！

＆＃13;

var dummyDirective = angular.module(dummyDirective, []);
dummyDirective.directive('hideOnMouseUpElsewhere', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {

      $(document).mouseup(function(e) {
        var container = $(element);

        if (!container.is(e.target) // if the target of the click isn't the container...
          && container.has(e.target).length === 0 && scope.status.menuVisible // ... nor a descendant of the container
          && !(e.target.id === attr.excludeClick)) // do not execute when clicked on this 
        {
          scope.status.menuVisible = false;
          scope.$apply();
        }
      });
    }
  }
})

＆＃13;

其中容器将包含您应用的DOM元素＆＃39; hideOnMouseUpElsewhere＆＃39;指令以及添加的属性＆＃39; excludeClick＆＃39;和e.target是您点击

的一个DOM元素

以下是accrodian bootstrap角度弹出菜单的HTML代码：

＆＃13;

<a id="MenuAnchor" href="" data-toggle="dropdown" class="dropdown-toggle" ng-click="status.menuVisible = !status.menuVisible;">
  <i id= "MenuIcon" class="glyphicon glyphicon-cog" style="font-size:20px; color: #428bca; cursor:pointer;"></i>
</a>
<div  id ="MenuPane"  ng-blur="status.menuVisible=false;" hide-on-mouse-up-elsewhere exclude-click='MenuIcon'>
 <div class="btn-group favoritesMenu" style="width: 300px;" ng-show="status.menuVisible"  >
 <accordion close-others="true">
  <accordion-group > 
    <accordion-heading>....</accordion-heading>
    <div ng-click="status.menuVisible=false;">Data</div>
  </accordion-group>	
 </accordion>

＆＃13;

DIV上的ng-blur

3 个答案: