我认为这不是直接的问题,但我不知道该怎么做。我正在尝试动态加载使用UI Bootstrap指令的内容,但是在加载内容时,UI Bootsrap组件不起作用。更具体地讲,工具提示无效。这是重要的代码:
<div ng-bind-html="trustSnippet(f.field.contentAfter)"></div>
JavaScript
$scope.trustSnippet = function(snippet) {
return $sce.trustAsHtml(snippet);
};
我要注入的HTML是:
<i class="fa fa-exclamation-circle" tooltip-placement="right" tooltip="On the Right!"></i>
有什么线索吗?
TY
这是因为ng-bind-html
不会编译插入的元素,因此UI Bootstrap指令-或任何其他指令或表达式都将无法工作。
如果要从特定位置获取HTML,则只需使用即可ng-include
。
对于静态位置:
<div ng-include="'path/to/html'"></div>
或者,如果位置是动态的并且存储在作用域公开的变量中$scope.path = "path/to/html";
:
<div ng-include="path"></div>
否则,如果带有Angular表达式/指令的HTML本身是动态生成或导入的(极少数情况,这应该使您重新检查设计以确保不违反任何最佳做法),则需要使用$compile
服务,最好使用以下指令:
app.directive("ngBindHtmlCompile", function($compile, $sce){
return {
restrict: "A",
link: function(scope, element, attrs){
scope.$watch($sce.parseAsHtml(attrs.ngBindHtmlCompile), function(html){
var el = angular.element("<div>").html(html);
element.empty();
element.append(el.children());
$compile(element.contents())(scope);
})
}
};
});
不要忘记添加"ngSanitize"
为依赖项。用法是:
<div ng-bind-html-compile="html"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句