我目前在我的应用程序中添加了一些引导工具提示。
所有的“正常”工具提示都可以,但是当我要使用时tooltip-html-unsafe,我得到的只是一个空的工具提示。
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的内容似乎为空,因此工具提示中没有任何内容可显示。我试图将一些HTML文本直接放在DOM中,例如:
<div class="tooltip-inner" ng-bind-html-unsafe="content"><b>test</b></div> 而且有效。
<div class="tooltip-inner" ng-bind-html-unsafe="content"><b>test</b></div>
你有好主意吗?
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; }; } }; })
编辑:后来我从ui-bootstrap中提取了自定义的代码,这很好,因为您现在不必修改ui-bootstrap即可使用它。这是在称为“ bootstrapx”的模块中提取的代码。这仅用于弹出窗口(因为我并不是真的使用工具提示),但是我觉得这也应该很容易适应工具提示。
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(); } }); } }; }]);
我在body标签上有dismissPopovers指令(这也可能适用于工具提示,您只需要对其进行修改以满足您的需要):
<body data-ng-controller="AppController" data-dismiss-popovers>