如何不影响所有的HTML元素

ng-blur how to not affect all html element

本文关键字：HTML 元素 何不 影响      更新时间：2023-09-26

我希望能够点击页面的某些部分而不让它调用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>

您可能需要自定义blur指令来处理单独通知容器上的事件。下面的内容:

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

描述见W3规范文档，

模糊>

当一个元素通过指向设备或标签导航失去焦点时，就会发生模糊事件。此事件对以下元素有效:

标签、输入、选择、文本区和按钮

  • 气泡:No
  • 可取消:No
  • 上下文信息:无
    •

    它将为其他标记提供不可预测的输出。如果你注意到，div标签不能捕捉焦点，因此没有模糊事件。

    但是如果你想使用像blur这样的事件，你可以创建自定义指令，它可以是这四个事件的组合DOMFocusOut, DOMFocusIn, mouseenter或mouseover, mouseleave。

    相关文章：