Скрыть Angular UI Bootstrap popover при нажатии за его пределами
Я пытаюсь вручную закрыть загрузочный popover, чтобы закрыть его, когда я нажимаю в любом месте document или body, который не является popover.
Самое близкое, что я нашел для этого, - создать директиву (нашел этот ответ), но это для ручного триггера, если переменная истинна или ложна.
Может ли кто-нибудь помочь мне разобраться, как закрыть его, если я нажму на все, что не является popover?
Я не против использования jQuery $(document).click(function(e){}); Я просто не знаю, как вызвать close.
<div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
Обычно popover-trigger="focus" выполняет трюк, однако мой popover содержит контент, на который нужно нажать. У меня есть ng-click внутри моего popover, который игнорируется, если я использую триггер фокуса, поэтому я ищу не так привычный способ обойти это.
Ответы
Ответ 1
Редакция:
Здесь, как это работает (длинное и исчерпывающее объяснение):
- Создайте настраиваемую директиву, позволяющую настроить таргетинг на триггер.
- Создайте настраиваемую директиву, которая будет добавлена в тело, и найдет триггерный элемент и вызовет пользовательское событие при нажатии.
Создайте настраиваемую директиву для таргетинга на триггерный элемент:
Вам нужно вызвать специальный обработчик событий из элемента, который открыл popover (в демо это кнопка). Задача состоит в том, что popover добавляется в качестве родного брата к этому элементу, и я всегда думаю, что у вещей больше возможностей сломаться, когда вы пересекаете DOM и ожидаете, что у него будет определенная структура. Существует несколько способов настроить таргетинг на триггер-элемент, но мой подход заключается в добавлении уникального имени класса в элемент (я выбираю "триггер" ) при нажатии на него. Только один popover может быть открыт одновременно в этом сценарии, поэтому можно безопасно использовать имя класса, но вы можете изменить его в соответствии с вашими предпочтениями.
Пользовательская директива
app.directive('popoverElem', function(){
return{
link: function(scope, element, attrs) {
element.on('click', function(){
element.addClass('trigger');
});
}
}
});
Применяется к кнопке
<button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" class="btn btn-default" popover-elem>Popover With Template</button>
Создайте настраиваемую директиву для тела документа (или любого другого элемента), чтобы вызвать закрытие popover:
Последняя часть состоит в том, чтобы создать пользовательскую директиву, в которой будет обнаружен элемент запуска и запустить пользовательское событие, чтобы закрыть popover, когда щелкнут элемент, к которому он применяется. Конечно, вы должны исключить начальное событие клика из элемента "триггер" и любые элементы, с которыми вы хотите взаимодействовать внутри вашего popover. Поэтому я добавил атрибут, называемый exclude-class, чтобы вы могли определить класс, который вы можете добавить к элементам, события кликов которых должны игнорироваться (не заставляя popover закрываться).
Чтобы очистить вещи, когда запускается обработчик событий, мы удаляем класс триггера, который был добавлен в триггерный элемент.
app.directive('popoverClose', function($timeout){
return{
scope: {
excludeClass: '@'
},
link: function(scope, element, attrs) {
var trigger = document.getElementsByClassName('trigger');
function closeTrigger(i) {
$timeout(function(){
angular.element(trigger[0]).triggerHandler('click').removeClass('trigger');
});
}
element.on('click', function(event){
var etarget = angular.element(event.target);
var tlength = trigger.length;
if(!etarget.hasClass('trigger') && !etarget.hasClass(scope.excludeClass)) {
for(var i=0; i<tlength; i++) {
closeTrigger(i)
}
}
});
}
};
});
Я добавил это в тег body, так что вся страница * действует как неприглядный фон для popover:
<body popover-close exclude-class="exclude">
И я добавил класс exclude для ввода в popover:
<input type="text" ng-model="dynamicPopover.title" class="form-control exclude">
Итак, есть некоторые хитрости и gotchas, но я оставлю это вам:
- Вы должны установить класс исключения по умолчанию в функции ссылок директивы popover-close, если один из них не определен.
- Вам нужно знать, что директива popover-close привязана к элементу, поэтому, если вы удалите стили, которые я установил в элементах html и body, чтобы дать им 100-процентную высоту, вы могли бы иметь "мертвые зоны" в вашем окне просмотра, если ваш контент не заполняет его.
Протестировано в Chrome, Firefox и Safari.
Ответ 2
UPDATE. С выпуском 1.0 мы добавили новый триггер под названием outsideClick, который автоматически закрывает popover или всплывающую подсказку, когда пользователь нажимает кнопку за пределами popover или всплывающей подсказки.
Начиная с версии 0.14.0, мы добавили возможность программного управления, когда ваша всплывающая подсказка /popover открыта или закрыта с помощью атрибутов tooltip-is-open или popover-is-open.
Ответ 3
Так как Angular UI Bootstrap 1.0.0, появляется новый outsideClick триггер для всплывающих подсказок и popovers (введен в этот запрос на растяжение В Angular UI Bootstrap 2.0.0 параметр popover-trigger был изменен для использования выражений Angular (Changelog), поэтому значение должно быть помещено в кавычки. Этот код будет работать с текущими версиями angular -ui:
<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="'outsideClick'"
popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
Этот код будет работать со старыми версиями Angular UI Bootstrap (до 2.0.0):
<div id="new_button" uib-popover-template="plusButtonURL" popover-trigger="outsideClick"
popover-placement="right" popover-append-to-body="true" popover-animation="false">+</div>
Ответ 4
Существует свойство popover-trigger, которое можно присвоить свойству focus.
<button
popover-placement="right"
popover="On the Right!"
popover-trigger="focus"
class="btn btn-default">
Right
</button>
Это трюк!:)
Изменить:
Чтобы включить всплывающую подсказку, а не отключить фокус, рассмотрите подход аналогичный этому
Если вы хотите, чтобы он работал в angular, попробуйте создать собственное определение триггера. Предложения о том, как это сделать, можно найти здесь.
Ответ 5
popover-trigger="'outsideClick'" Это будет работать отлично.
popover-trigger="outsideClick" Это не будет.
Я занял 1 день, чтобы разобраться, почему он не работал у меня.
Это потому, что они проверяют это с помощью этого кода, "if (trigger === 'outsideClick')"
Ответ 6
То, что вы ищете, это
<button
popover-trigger="outsideClick"
class="btn btn-default">
Right
</button>
Из документации - триггер outsideClick заставит popover переключаться на клик и скрыть, когда что-либо еще нажата.
Ответ 7
Вы можете использовать:
Разметка
<div ng-app="Module">
<div ng-controller="formController">
<button uib-popover-template="dynamicPopover.templateUrl" popover-trigger="focus"
popover-placement="left" type="button" class="btn btn-default">
Popover With Template
</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>
<span>prasad!!</span>
</div>
</script>
</div>
</div>
Javascript
<script type="text/javascript">
var app = angular.module("Module", ['ui.bootstrap']);
app.controller("formController", ['$scope', function($scope) {
$scope.dynamicPopover = {
templateUrl: 'myPopoverTemplate.html'
};
}]);
</script>
Ответ 8
У меня была такая же проблема, и popover-trigger="'outsideClick'" работал у меня. Интересно, что в документации не указан этот вопрос.
Ответ 9
Angular boostrap ui новая версия 1.x имеет возможность выхода из функции бокового щелчка. обновите его до новой версии.
<button uib-popover-template="updatePassword.templateUrl" popover-title="Update Password" popover-trigger="outsideClick" popover-placement="right" popover-append-to-body="true">Click here</button>
его работа для меня.
фокус не будет работать, если какая-либо кнопка отправки или событие click в popover. поэтому этот полезный способ сделать.
Ответ 10
Как насчет опции outsideClick 'в методе $uibTooltipProvider' setTriggers. Документация гласит: "Триггер openClick заставит всплывающую подсказку переключиться на клик и скрыть, когда что-нибудь еще нажата".
Документация
Ответ 11
Добавьте поведение onclick="void(0)" к некоторым из ваших фоновых элементов, которые при нажатии будут избавлены от popovers.
Посмотрите https://github.com/angular-ui/bootstrap/issues/2123
