Angular-ui info-bulle avec le HTML

Je suis actuellement à l'ajout de certaines bootstrap des info-bulles dans mon application.

Tous de la "normale" info-bulles sont ok, mais quand je veux utiliser tooltip-html-unsafe, tout ce que j'ai est une info-bulle vide.

Mon info-bulle:

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

Dans les DOM, j'ai:

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

La div du contenu semble vide, donc il n'y a rien à afficher dans l'info-bulle. J'ai essayé de mettre directement dans le DOM HTML texte comme:

<div class="tooltip-inner" ng-bind-html-unsafe="content"><b>test</b></div> et il fonctionne.

Avez-vous une idée?

OriginalL'auteur Mencls | 2013-09-26

  1. 23

    Le html dangereuses directive vise à point à son contenu. Que dire de ce:

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

    Puis, dans SomeCtrl, faire une variable pour stocker le code html:

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

    SI vous souhaitez modifier d'amorçage de prendre le contenu d'un élément, il peut être fait comme ça. Tout d'abord, vous devez modifier l'info-bulle modèle de sorte qu'il appelle une fonction pour obtenir le code 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" +
    "");
}]);

    Ensuite, faire une fonction de lien pour le 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: plus Tard, j'ai extrait le code personnalisé à partir de l'interface utilisateur-bootstrap, qui est bon, puisque vous n'avez pas à modifier l'interface utilisateur de bootstrap à l'utiliser maintenant. Voici l'extrait de code dans un module appelé "bootstrapx". C'est juste pour popovers (comme je n'étais pas vraiment à l'aide des info-bulles), mais j'ai l'impression que cela doit être facilement adaptable pour les info-bulles.

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

    J'ai le dismissPopovers directive sur la balise body (c'est probablement applicable pour les info-bulles trop, vous n'aurez plus qu'à le modifier pour l'adapter à vos besoins):

    <body data-ng-controller="AppController" data-dismiss-popovers>
    Selon angulaire de l'interface utilisateur du wiki, c'est la syntaxe correcte. http://angular-ui.github.io/bootstrap/#/tooltip j'ai essayé le vôtre, il n'a pas travaillé.
    Oh merde! Vous avez raison, j'ai oublié, j'ai modifié bootstrap. Normalement, il veut que le contenu réel.
    Merci pour votre réponse. Où dois-je mettre le lien de fonction ?
    Ok j'ai trouvé un moyen plus rapide pour corriger ici. Mais le vôtre est trop bon 😉
    simmi j'ai édité la réponse à inclure la liste dismisser que j'utilise, j'espère que ça va vous aider!

    OriginalL'auteur aet

  2. 6

    J'ai créé la coutume de la directive qui permet html info-bulles pour les bootsrap de manière très simple. Pas besoin de surcharger les modèles:

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

    C'est comment vous l'appelez

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

    Et le modèle peut être comme ceci:

    <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>
    n'a pas fonctionné pour moi, mais c'était une bonne idée ;).

    OriginalL'auteur Adomas.NET

  3. 4

    Il est maintenant buit-in fonctionnalité de modèle: 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>

    OriginalL'auteur Parris Varney