Всплывающая подсказка 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) из любого события, используемого для вызова всплывающей подсказки

какие-либо предложения?

0 ответов