DIV上的ng-blur

Question

我試圖在模糊上隱藏DIV （焦點已從DIV移除）。 我正在使用角度和引導程序。 到目前為止，我已經嘗試在顯示時在DIV上設置“焦點”，然后在用戶點擊屏幕上的任何其他位置時設置ng-blur功能。 這不起作用。

基本上問題是我無法通過JS將注意力集中在我的“ #lockerBox ”上，當我點擊DIV時，我的“ hideLocker ”函數沒有問題。

<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的元素上設置blur事件。

Answer 3

即使我有同樣的問題 - 但是能夠在自定義指令中使用'mouseup'事件在整個文檔中解決它以下是代碼，其中我使用ng-show將包含在div中的手風琴切換為彈出窗口（ ）=“變量”現在這個變量是菜單切換按鈕HTML元素，div彈出HTML元素以及處理鼠標的自定義指令的關鍵！

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

容器將具有您應用'hideOnMouseUpElsewhere'指令的DOM元素以及添加的屬性'excludeClick'，而e.target是您點擊的一個DOM元素

以下是accrodian bootstrap角度彈出菜單的HTML代碼：

 <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>