Question

我希望能够点击页面的某些部分，而不是让它调用hideAll函数

app.controller('NotificationController', function($scope, $http) {
   $scope.visible = true;
   $scope.changeStatus = function(){
      $scope.visible = !$scope.visible; 
   };
   $scope.hideAll= function(){
      $scope.visible=false;
   };
});

以下是显示此内容的链接：

<a href="#" ng-disabled="checked" ng-click="changeStatus()" ng-blur="hideAll()" class="button-default show-notifications js-show-notifications active">Press</a>

我想要这样，当按下此页面时，我不想触发blur

<div class="notifications js-notifications" ng-init="visible=false" ng-show="visible">
....
</div>

知道我是如何做这项工作的吗？

编辑：

完整的HTML：

    <li id="notifications" ng-app="notifications" ng-controller="NotificationController as notification">

        <a href="#" ng-disabled="checked" ng-click="changeStatus()" ng-blur="hideAll()" class="button-default show-notifications js-show-notifications active">
            <i class="fa fa-bell-o" style="font-size: 17px;">
            <div class="notifications-count js-count" data-count="<% notys.length %>"><% notys.length %></div>
          </i>
       </a>
        <div class="notifications js-notifications" ng-init="visible=false" ng-show="visible">
            <h3>Notifications</h3>
            <ul class="notifications-list">
                <li class="item no-data">You don't have notifications</li>
                <li ng-repeat="x in notys" class="item js-item" data-id="<% x.id %>">
                    <a href="<% x.project_id %>"  class="notification-link">
                    <div class="details">
                        <span class="title">New group created: <b> <% x.subject %> </b>. New project assigned to you <b> <% x.body %> </b></span>
                        <span class="date"><% x.created_at %></span>
                    </div>
                </a>
                </li>
            </ul>
            <a href="#" class="show-all">Show all notifications</a>
        </div>
     </li>

Answer 1

您可能需要自定义模糊指令来处理单独通知容器上的事件。这些方面的东西：

directive('customBlur', function(){
return {
  restrict: 'A',
  scope: {
    'customBlur': '='
  },
  link: function(scope, element, attr) {
    element.on('click', function(event){
      var targetAttr = angular.element(event.target).attr('custom-blur')
      if (typeof targetAttr !== 'undefined' && scope.customBlur) {
        scope.$apply(function(){
          scope.customBlur = false;
        });
      } 
    });
  }
}});

这是一个有效的plukner

Answer 2

Description given in W3 specification docs,

blur

The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements:

LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

Bubbles: No

Cancelable: No

Context Info: None

It will give you unpredictable output for other tags. If you have noticed, div tag doesn't capture focus hence no blur event.

But if you want to use event like blur, you can create custom directive which can be combinations of these four events DOMFocusOut, DOMFocusIn, mouseenter or mouseover, mouseleave.

ng-blur如何不影响所有html元素

2 个答案: