que - Información sobre herramientas en ui angular con HTML



add tooltip jquery (2)

Actualmente estoy agregando algunos tooltips de arranque en mi aplicación.

Todas las tooltip-html-unsafe "normales" están bien, pero cuando quiero usar tooltip-html-unsafe , todo lo que obtengo es una información sobre herramientas vacía.

Mi información sobre herramientas:

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

En el DOM, tengo:

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

El contenido del div parece estar vacío, por lo que no hay nada que mostrar en la información sobre herramientas. Traté de poner directamente en el DOM algo de texto HTML como:

<div class="tooltip-inner" ng-bind-html-unsafe="content"><b>test</b></div> y funciona.

¿Tienes una idea?


Ahora hay funcionalidad de plantilla integrada: 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>

Creé una directiva personalizada que permite html tooltips para bootsrap de una manera muy simple. No es necesario anular ninguna plantilla:

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();
                }
            };
        }
    };
}]);

Así es como lo llamas

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

Y la plantilla puede ser así:

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




angular-ui-bootstrap