Angular -ui tooltip с HTML

В настоящее время я добавляю всплывающие подсказки в моем приложении.

Все "обычные" всплывающие подсказки в порядке, но когда я хочу использовать tooltip-html-unsafe, все, что у меня есть, это пустая подсказка.

Моя подсказка:

<a><span tooltip-placement="right" tooltip-html-safe="{{myHTMLText}}"> Help </span></a>

В DOM у меня есть:

<div class="tooltip-inner" ng-bind-html-unsafe="content"></div>

Содержимое div кажется пустым, поэтому в всплывающей подсказке ничего не видно. Я попытался поместить прямо в DOM некоторый текст HTML, например:

<div class="tooltip-inner" ng-bind-html-unsafe="content"><b>test</b></div> и он работает.

У вас есть идея?

ОТВЕТЫ

Ответ 1

Директива html-unsafe предназначена для указания на контент. Что об этом:

<div data-ng-controller="SomeCtrl">
    <span data-tooltip-html-unsafe="{{yourContent}}" data-tooltip-placement="right">
        Help
    </span>
</div>

Затем в SomeCtrl сделайте переменную для хранения html:

$scope.yourContent = "<b>my html, yay</b>

ЕСЛИ вы хотите изменить загрузку, чтобы взять контент из элемента, это можно сделать следующим образом. Во-первых, вы должны изменить шаблон всплывающей подсказки так, чтобы он вызывал функцию для получения html:

angular.module("template/tooltip/tooltip-html-unsafe-popup.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tooltip/tooltip-html-unsafe-popup.html",
    "<div class=\"tooltip {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
    "  <div class=\"tooltip-arrow\"></div>\n" +
    "  <div class=\"tooltip-inner\" ng-bind-html-unsafe=\"getToolTipHtml()\"></div>\n" +
    "</div>\n" +
    "");
}]);

Затем создайте функцию ссылки для tooltipHtmlUnsafePopup:

.directive( 'tooltipHtmlUnsafePopup', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
    templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html',
    link: function(scope, element, attrs) {
        scope.getTooltipHtml = function() {
            var elemId = '#' + scope.content;
            var htmlContent = $rootElement.find(elemId).html();
            return htmlContent;
        };
    }
  };
})

EDIT: позже я извлек настроенный код из ui-bootstrap, что хорошо, так как вам не нужно изменять ui-bootstrap, чтобы использовать его сейчас. Вот извлеченный код в модуле под названием "bootstrapx". Это просто для popovers (поскольку я на самом деле не использовал всплывающие подсказки), но я чувствую, что это тоже легко адаптируется для всплывающих подсказок.

angular.module("bootstrapx", ["bootstrapx.tpls","bootstrapx.popover","bootstrapx.popover.dismisser"]);
angular.module("bootstrapx.tpls", ["template/popover/popover-html.html","template/popover/popover-html-unsafe.html","template/popover/popover-template.html"]);


angular.module( 'bootstrapx.popover', [ 'ui.bootstrap.tooltip' ] )
    .directive('popover', [ function() {
        return {
            restrict: 'EA',
            priority: -1000,
            link: function(scope, element) {
                element.addClass('popover-link');
            }
        };
    }])
    .directive('popoverHtml', [ function() {
        return {
            restrict: 'EA',
            priority: -1000,
            link: function(scope, element) {
                element.addClass('popover-link');
            }
        };
    }])
    .directive('popoverHtmlUnsafe', [ function() {
        return {
            restrict: 'EA',
            priority: -1000,
            link: function(scope, element) {
                element.addClass('popover-link');
            }
        };
    }])
    .directive('popoverTemplate', [ function() {
        return {
            restrict: 'EA',
            priority: -1000,
            link: function(scope, element) {
                element.addClass('popover-link');
            }
        };
    }])

    .directive( 'popoverHtmlPopup', [ function() {
        return {
            restrict: 'EA',
            replace: true,
            scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
            templateUrl: 'template/popover/popover-html.html'
        };
    }])
    .directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
        return $tooltip( 'popoverHtml', 'popover', 'click' );
    }])

    .directive( 'popoverHtmlUnsafePopup', [ '$rootElement', function ( $rootElement ) {
        return {
            restrict: 'EA',
            replace: true,
            scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
            templateUrl: 'template/popover/popover-html-unsafe.html',
            link: function(scope, element) {
                var htmlContent = '';
                scope.$watch('content', function(value) {
                    if (!value) {
                        return;
                    }
                    var elemId = '#' + value;
                    htmlContent = $rootElement.find(elemId).html();
                });

                scope.getPopoverHtml = function() {
                    return htmlContent;
                };
            }
        };
    }])
    .directive( 'popoverHtmlUnsafe', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
        return $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' );
    }])

    .directive( 'popoverTemplatePopup', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) {
        return {
            restrict: 'EA',
            replace: true,
            scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
            templateUrl: 'template/popover/popover-template.html',
            link: function(scope, element, attrs) {
                scope.getPopoverTemplate = function() {
                    var templateName = scope.content + '.html';
                    return templateName;
                };
            }
        };
    }])
    .directive( 'popoverTemplate', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
        return $tooltip( 'popoverTemplate', 'popover', 'click' );
    }]);

    angular.module("template/popover/popover-html.html", []).run(["$templateCache", function($templateCache) {
        $templateCache.put("template/popover/popover-html.html",
            "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
            "  <div class=\"arrow\"></div>\n" +
            "\n" +
            "  <div class=\"popover-inner\">\n" +
            "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
            "      <div class=\"popover-content\" ng-bind-html=\"content\"></div>\n" +
            "  </div>\n" +
            "</div>\n" +
            "");
        }]);

    angular.module("template/popover/popover-html-unsafe.html", []).run(["$templateCache", function($templateCache) {
        $templateCache.put("template/popover/popover-html-unsafe.html",
            "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
            "  <div class=\"arrow\"></div>\n" +
            "\n" +
            "  <div class=\"popover-inner\">\n" +
            "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
            "      <div class=\"popover-content\" ng-bind-html-unsafe=\"{{getPopoverHtml()}}\"></div>\n" +
            "  </div>\n" +
            "</div>\n" +
            "");
    }]);

    angular.module("template/popover/popover-template.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("template/popover/popover-template.html",
            "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
            "  <div class=\"arrow\"></div>\n" +
            "\n" +
            "  <div class=\"popover-inner\">\n" +
            "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
            "      <div class=\"popover-content\" ng-include=\"getPopoverTemplate()\"></div>\n" +
            "  </div>\n" +
            "</div>\n" +
            "");
    }]);


    angular.module('bootstrapx.popover.dismisser', [])
        .directive( 'dismissPopovers', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    element.bind('mouseup', function(e) {
                        var clickedOutside = true;
                        $('.popover-link').each(function() {
                            if ($(this).is(e.target) || $(this).has(e.target).length) {
                                clickedOutside = false;
                                return false;
                            }
                        });
                        if ($('.popover').has(e.target).length) {
                            clickedOutside = false;
                        }
                        if (clickedOutside) {
                            $('.popover').prev().click();
                        }
                    });   
                }
            };
        }]);

У меня есть директива rejectPopovers на теге body (это, вероятно, применимо и для всплывающих подсказок, вам просто нужно будет изменить его в соответствии с вашими потребностями):

<body data-ng-controller="AppController" data-dismiss-popovers>

Ответ 2

Я создал настраиваемую директиву, которая позволяет html-подсказки для bootsrap очень просто. Не нужно переопределять любые шаблоны:

angular.module('vermouthApp.htmlTooltip', [
])
.directive('vaTooltip', ['$http', '$templateCache', '$compile', '$parse', '$timeout', function ($http, $templateCache, $compile, $parse, $timeout)
{
    //va-tooltip = path to template or pure tooltip string
    //tooltip-updater = scope item to watch for changes when template has to be reloaded [optional (only if template is dynamic)]
    //All other attributes can be added for standart boostrap tooltip behavior (ex. tooltip-placement)
    return {
        restrict: 'A',
        scope: true,
        compile: function (tElem, tAttrs)
        {
            //Add bootstrap directive
            if (!tElem.attr('tooltip-html-unsafe'))
            {
                tElem.attr('tooltip-html-unsafe', '{{tooltip}}');
            }
            return function (scope, element, attrs)
            {
                scope.tooltip = attrs.vaTooltip;
                var tplUrl = $parse(scope.tooltip)(scope);
                function loadTemplate()
                {
                    $http.get(tplUrl, { cache: $templateCache }).success(function (tplContent)
                    {
                        var container = $('<div/>');
                        container.html($compile(tplContent.trim())(scope));
                        $timeout(function ()
                        {
                            scope.tooltip = container.html();
                        });
                    });
                }
                //remove our direcive to avoid infinite loop
                element.removeAttr('va-tooltip');
                //compile element to attach tooltip binding
                $compile(element)(scope);

                if (angular.isDefined(attrs.tooltipUpdater))
                {
                    scope.$watch(attrs.tooltipUpdater, function ()
                    {
                        loadTemplate();
                    });
                } else
                {
                    loadTemplate();
                }
            };
        }
    };
}]);

Вот как вы это называете

 <a va-tooltip="'tooltipContent.html'" tooltip-updater="item" tooltip-placement="bottom">
                <b><i>{{item.properties.length - propertyShowLimit + ' properties more...'}}</i></b>
            </a>

И шаблон может быть таким:

<script id="tooltipContent.html" type="text/ng-template">
    <span ng-repeat="prop in item.properties>
        <b>{{prop.name}}</b>:
        <span ng-repeat="val in prop.values">{{val.value}}&nbsp;</span>
        <br />
    </span>
</script>

Ответ 3

Теперь существуют функциональные возможности шаблонов: https://angular-ui.github.io/bootstrap/#tooltip

<a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>

<script type="text/ng-template" id="myTooltipTemplate.html">
  <span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
</script>