Как подключиться к прослушивателю OnOpen для uib-popover?

Контекст: я использую angular 1 и этот элемент управления UIB Popover.

Поскольку в вызываемом мной шаблоне всплывающего окна есть текстовое поле, моя цель — сосредоточиться на этом текстовом поле всякий раз, когда открывается всплывающее окно.

введите здесь описание изображения

К сожалению, для "onOpen" нет всплывающего окна прослушивателя/события.

Поэтому я попытался сделать

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
})

Мне просто интересно, какие еще варианты у меня могут быть?

Спасибо


angularjs angular-ui-bootstrap bootstrap-popover
person TypingPanda    schedule 12.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я ничего не нашел в документации, в которой говорилось о событиях, и нашел эту проблему на github ui-bootstrap, в которой говорится, что они не поддерживают события и никогда не планируют их реализовывать. https://github.com/angular-ui/bootstrap/issues/5060

Если вы ищете другой вариант, который даст вам доступ к событиям, будет реализация вашей собственной директивы всплывающих окон, которая просто обертывает всплывающие окна начальной загрузки. Теоретически они могут функционировать так же, как ui-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, вы можете добавить поддержку дополнительных конфигураций, добавив дополнительные свойства области действия.

person Michael Lynch    schedule 12.02.2019
comment
Привет Михаил, спасибо за ваш ответ. Но я решил свою проблему другим способом. Ваша идея великолепна, просто я не хочу сам разбираться со всеми всплывающими позициями. Поэтому я попробовал пользовательскую директиву о фокусе, как это предлагается в этой ссылке на переполнение стека. stackoverflow.com/questions/14833326 / Это работает как шарм. Спасибо - person TypingPanda; 15.02.2019