Всплывающая подсказка angular-ui-bootstrap
Я пытаюсь создать расширенную версию всплывающей подсказки Angular UI Bootstrap, хотя на самом деле это скорее перевод $ modal провайдера в провайдер всплывающей подсказки
Мое намерение состоит в том, чтобы создать всплывающую подсказку, которая будет иметь свой собственный контроллер - почти так же, как это можно сделать с помощью
$modal
поставщик
Я пытался создать tooltipExtended
Директива такова:
.directive('tooltipExtended', [ 'tooltipStack', '$timeout', function (tooltipStack, $timeout) {
return {
restrict: 'EA',
scope: {
index: '@',
animate: '=',
placement: '@'
},
replace: true,
transclude: true,
templateUrl: function (tElement, tAttrs) {
return tAttrs.templateUrl || 'template/tooltip/extended.html';
},
link: function (scope, element, attrs) {
//....etc....
}
};
}
]);
.directive('tooltipTransclude', function () {
return {
link: function ($scope, $element, $attrs, controller, $transclude) {
$transclude($scope.$parent, function (clone) {
$element.empty();
$element.append(clone);
});
}
};
});
angular.module("template/tooltip/extended.html", []).run(["$templateCache", function ($templateCache) {
$templateCache.put("template/tooltip/extended.html",
"<div tabindex=\"-1\" role=\"tooltip\" class=\"tooltip {{placement}}\" ng-class=\"{in: animate}\" ng-style=\"{'z-index': 1050 + index*10, display: 'block'}\" ng-click=\"close($event)\">\n" +
" <div class=\"tooltip\"><div class=\"tooltip-content\" tooltip-transclude></div></div>\n" +
"</div>");
}]);
а затем с помощью tooltipStack
(опять же, в основном отражает $modalStack
просто без backdrop
) - Я делаю следующее в tooltipStack.open
функция:
// ...
var body = $document.find('body').eq(0);
var angularDomEl = angular.element('<div tooltip-extended></div>');
var index = openedTooltips.length() - 1;
angularDomEl.attr({
'template-url': tooltip.tooltipTemplateUrl,
'tooltip-class': tooltip.tooltipClass,
'index': index,
'placement': tooltip.placement,
'animate': 'animate'
}).html(tooltip.content);
var tooltipDomEl = $compile(angularDomEl)(tooltip.scope);
// ...
когда я делаю это, не похоже, что контроллер привязан к всплывающей подсказке
если я изменю это, чтобы использовать существующий Angular UI Bootstrap tooltip
директива (которая вызывает в $tooltip
провайдер) вроде так:
var angularDomEl = angular.element('<div tooltip></div>');
вдруг все работает нормально, но, просматривая функцию компиляции для провайдера $ tooltip, я не понимаю, в чем заключается это различие - единственный код, который выполняется, - это в основном логика построения для $tooltip
провайдера link
функция, которая возвращается $get
если вам интересно - чтобы получить позицию всплывающей подсказки, это расширение полагается на отправку angular.element($event.target)
из любого события, используемого для вызова всплывающей подсказки
какие-либо предложения?