我正在我的应用程序中添加一些引导工具提示.
所有的“正常”工具提示都可以,但是当我想使用tooltip-html-unsafe时,我所得到的只是一个空的工具提示.
我的工具提示：
< a>< span tooltip-placement =“right”tooltip-html-safe =“{{myHTMLText}}”>帮助< / 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>它的工作原理
你有想法吗？
html不安全的指令旨在指出它的内容.那这个呢：
<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”的模块中.这只是为了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,element) {
element.addClass('popover-link');
}
};
}])
.directive('popoverHtml',element) {
element.addClass('popover-link');
}
};
}])
.directive('popoverHtmlUnsafe',element) {
element.addClass('popover-link');
}
};
}])
.directive('popoverTemplate',element) {
element.addClass('popover-link');
}
};
}])
.directive( 'popoverHtmlPopup',scope: { title: '@',content: '@',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',templateUrl: 'template/popover/popover-html-unsafe.html',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',$tooltip ) {
return $tooltip( 'popoverHtmlUnsafe','click' );
}])
.directive( 'popoverTemplatePopup',[ '$http','$templateCache','$compile',function ( $http,$templateCache,$compile,$parse) {
return {
restrict: 'EA',templateUrl: 'template/popover/popover-template.html',attrs) {
scope.getPopoverTemplate = function() {
var templateName = scope.content + '.html';
return templateName;
};
}
};
}])
.directive( 'popoverTemplate',$tooltip ) {
return $tooltip( 'popoverTemplate','click' );
}]);
angular.module("template/popover/popover-html.html",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",function($templateCache) {
$templateCache.put("template/popover/popover-html-unsafe.html",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",function($templateCache) {
$templateCache.put("template/popover/popover-template.html",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',$parse) {
return {
restrict: 'A',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();
}
});
}
};
}]);
我有关于身体标签的dismissPopovers指令(这可能适用于工具提示,您只需要修改它以满足您的需要)：
<body data-ng-controller="AppController" data-dismiss-popovers>
