带有 HTML 的 Angular-ui 工具提示 [英] Angular-ui tooltip with HTML
本文介绍了带有 HTML 的 Angular-ui 工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在我的应用程序中添加一些引导工具提示.
所有正常"工具提示都可以，但是当我想使用 tooltip-html-unsafe 时，我得到的只是一个空的工具提示.
我的工具提示:
在 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> 并且它有效.
你有什么想法吗?
解决方案
html-unsafe 指令旨在指向它的内容.这个怎么样:
<span data-tooltip-html-unsafe="{{yourContent}}" data-tooltip-placement="right">帮助</span>然后，在 SomeCtrl 中，创建一个变量来保存 html:
$scope.yourContent = "<b>我的 html，耶</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 () {返回 {限制:'E'，替换:真的，范围:{内容:'@'，位置:'@'，动画:'&'，isOpen:'&'},templateUrl: '模板/工具提示/工具提示-html-unsafe-popup.html',链接:函数(范围，元素，属性){scope.getTooltipHtml = 函数(){var elemId = '#' + scope.content;var htmlContent = $rootElement.find(elemId).html();返回 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() {返回 {限制:'EA'，优先级:-1000，链接:函数(范围，元素){element.addClass('popover-link');}};}]).directive('popoverHtml', [ function() {返回 {限制:'EA'，优先级:-1000，链接:函数(范围，元素){element.addClass('popover-link');}};}]).directive('popoverHtmlUnsafe', [ function() {返回 {限制:'EA'，优先级:-1000，链接:函数(范围，元素){element.addClass('popover-link');}};}]).directive('popoverTemplate', [ function() {返回 {限制:'EA'，优先级:-1000，链接:函数(范围，元素){element.addClass('popover-link');}};}]).directive( 'popoverHtmlPopup', [ function() {返回 {限制:'EA'，替换:真的，范围:{标题:'@'，内容:'@'，位置:'@'，动画:'&'，isOpen:'&'},templateUrl: '模板/popover/popover-html.html'};}]).directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ){返回 $tooltip('popoverHtml', 'popover', 'click');}]).directive( 'popoverHtmlUnsafePopup', [ '$rootElement', function ( $rootElement ) {返回 {限制:'EA'，替换:真的，范围:{标题:'@'，内容:'@'，位置:'@'，动画:'&'，isOpen:'&'},templateUrl: 'template/popover/popover-html-unsafe.html',链接:函数(范围，元素){var htmlContent = '';scope.$watch('content', function(value) {如果(！值){返回;}var elemId = '#' + 值；htmlContent = $rootElement.find(elemId).html();});scope.getPopoverHtml = 函数(){返回 htmlContent;};}};}]).directive( 'popoverHtmlUnsafe', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ){返回 $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' );}]).directive( 'popoverTemplatePopup', [ '$http', '$templateCache', '$compile', '$parse', function ($http, $templateCache, $compile, $parse) {返回 {限制:'EA'，替换:真的，范围:{标题:'@'，内容:'@'，位置:'@'，动画:'&'，isOpen:'&'},templateUrl: 'template/popover/popover-template.html',链接:函数(范围，元素，属性){scope.getPopoverTemplate = function() {var templateName = scope.content + '.html';返回模板名称；};}};}]).directive( 'popoverTemplate', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ){返回 $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) {返回 {限制:'A'，链接:函数(范围，元素，属性){element.bind('mouseup', function(e) {var clickedOutside = true;$('.popover-link').each(function() {if ($(this).is(e.target) || $(this).has(e.target).length) {clickedOutside = false;返回假；}});if ($('.popover').has(e.target).length) {clickedOutside = false;}如果(clickedOutside){$('.popover').prev().click();}});}};}]);我在 body 标签上有dismissPopovers 指令(这可能也适用于工具提示，您只需修改它以满足您的需要):
I am currently adding some bootstrap tooltips in my application.
All of the "normal" tooltips are ok, but when I want to use tooltip-html-unsafe, all I got is an empty tooltip.
My tooltip:
<a><span tooltip-placement="right" tooltip-html-safe="{{myHTMLText}}"> Help </span></a>
In the DOM, I have:
<div class="tooltip-inner" ng-bind-html-unsafe="content"></div>
The div's content seems empty, so there is nothing to show in the tooltip. I tried to put directly in the DOM some HTML text like:
<div class="tooltip-inner" ng-bind-html-unsafe="content"><b>test</b></div> and it works.
Do you have an idea?
解决方案
The html-unsafe directive is designed to point at it's content. What about this:
<div data-ng-controller="SomeCtrl">
<span data-tooltip-html-unsafe="{{yourContent}}" data-tooltip-placement="right">
Help
</span>
</div>
Then, in SomeCtrl, make a variable to hold the html:
$scope.yourContent = "<b>my html, yay</b>
IF you would like to modify bootstrap to take the content from a element, it can be done like this. First, you must change the tooltip template so that it calls a function to get the 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" +
"");
}]);
Then, make a link function for the 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: Later I extracted the customized code from ui-bootstrap, which is good since you do not have to modify ui-bootstrap to use it now. Here is the extracted code, in a module called "bootstrapx". This is just for popovers (as I was not really using tooltips) but I feel like this should be easily adaptable for tooltips too.
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();
}
});
}
};
}]);
I have the dismissPopovers directive on the body tag (this is likely applicable for tooltips too, you will just have to modify it to suit your needs):
<body data-ng-controller="AppController" data-dismiss-popovers>
这篇关于带有 HTML 的 Angular-ui 工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
