нг-размытие, как не повлиять на все элементы HTML

0

Я хочу, чтобы иметь возможность щелкнуть какую-то часть страницы, чтобы она не hideAll функцию 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>
  • 0
    Пожалуйста, объясните ожидаемое поведение более подробно. Вопрос сбивает с толку. Нет размытия, связанного с элементом div.notifications поэтому нет причин, по которым оно могло бы вызвать размытие
  • 0
    Я ожидаю, что при нажатии на элемент div.notifcations не hideAll() функция hideAll() ... Теперь он вызывает эту функцию, где бы вы ни hideAll() на странице ...
Показать ещё 3 комментария
Теги:

2 ответа

0
Лучший ответ

Для обработки событий в отдельном контейнере уведомлений может потребоваться настраиваемая директива 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;
        });
      } 
    });
  }
}});

Вот рабочий плукер

Поделиться
  • 0
    Спасибо, как реализовать это в моем примере?
  • 0
    Проблема сейчас в том, что он не закроется, если я нажму на извещение div fit ...
Показать ещё 2 комментария
0

Описание, приведенное в документах спецификации W3,

пятно

Событие размытия происходит, когда элемент теряет фокус либо через указывающее устройство, либо путем навигации по табуляции. Это событие действует для следующих элементов:

LABEL, INPUT, SELECT, TEXTAREA и BUTTON.

Пузыри: Нет Отменяется: нет Контекстная информация: нет

Это даст вам непредсказуемый результат для других тегов. Если вы заметили, тег div не захватывает фокус, а значит, не будет размытия.

Но если вы хотите использовать событие, например blur, вы можете создать настраиваемую директиву, которая может быть комбинацией этих четырех событий DOMFocusOut, DOMFocusIn, mouseenter или mouseover, mouseleave.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню