Как подключить "OnOpen" слушатель для UIB-поповера?
Контекст: я использую угловой 1 и этот элемент управления UIB Popover.
Поскольку в шаблоне всплывающего окна есть текстовое поле, которое я вызвал, моя цель - фокусироваться на этом текстовом поле при каждом открытии всплывающего окна.
К сожалению, для "onOpen" нет прослушивателя / события popover.
Поэтому я попытался сделать
scope.$watch(()=>{return scope.isOpen}, (obj) ={
// where scope.isOpen is the local var in the popover-is-open
// expecting to write some code here to manipulate the element
// to realise the focus operation
// but there is no popover element yet when this is called
})
Мне просто интересно, какие еще варианты у меня могут быть?
Спасибо
1 ответ
Я ничего не нашел в документации, в которой говорилось о событиях, и обнаружил эту проблему на github ui-bootstrap, заявив, что они не поддерживают события и никогда не планируют их реализовывать. https://github.com/angular-ui/bootstrap/issues/5060
Если вы ищете другой вариант, который предоставил бы вам доступ к событиям, можно было бы реализовать собственную директиву popover, которая просто оборачивает загрузочные всплывающие окна. Теоретически, они могут функционировать так же, как ui-bootstrap, и позволяют напрямую подключаться к событиям, предоставляемым bootstrap.
HTML
<div my-popover="Hello World" popover-title="Title" popover-shown="myCallback()">...</div>
JavaScript ('my-popover.directive.js')
angular
.module('myModule')
.directive('myPopover', myPopover);
function myPopover() {
return {
scope: {
popoverTitle: '@',
popoverShown: '&'
},
restrict: 'A',
link: function(scope, elem, attr) {
$(elem).popover({
title: scope.popoverTitle,
content: attr.myPopover
});
$(elem).on('shown.bs.popover', function () {
if(scope.popoverShown && typeof scope.popoverShown === 'function'){
scope.popoverShown();
}
});
}
};
}
Подобно uib-popover, вы можете добавить поддержку дополнительных конфигураций, добавив дополнительные свойства области видимости.