I'm attempting to build an extended version of the Angular UI Bootstrap tooltip although it's really more of a translation of the $modal provider into a tooltip provider
my intent is to create a tooltip that will have its own controller - in much the same way as can be done with the
$modalprovider
I tried creating a tooltipExtended directive like so:
.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>"); }]); and then using the tooltipStack (again, basically mirroring the $modalStack, just without a backdrop) - I do the following in the tooltipStack.open function:
// ... 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); // ... when I do this, it doesn't seem as though the controller is binding to the tooltip
if I change this to use the existing Angular UI Bootstrap tooltip directive (which calls into the $tooltip provider) like so:
var angularDomEl = angular.element('<div tooltip></div>'); everything suddenly works fine, but looking through the compile function for the $tooltip provider, I don't understand what makes this difference - the only code that executes is basically the construction logic for the $tooltip provider's link function that's returned by the $get
in case you're curious - to get the tooltip position, this extension relies on sending the angular.element($event.target) from whatever event is used to trigger the tooltip
any suggestions?
