ng-bind-html 与 UI Bootstrap 指令

ng-bind-html with UI Bootstrap directives

我认为这不是一个直接的问题,但我不知道该怎么做。我正在尝试动态加载使用 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>

否则,如果 HTML 本身与 Angular expressions/directives 是动态生成或导入的(一种罕见的情况,这应该让你重新检查你的设计以确保你没有违反任何最佳实践),您需要使用 $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>

我遇到了同样的问题。以下方法对我有用。

在HTML,

<div ng-bind-html="f.field.contentAfter | unsafe"></div>

在Javascript,

app.filter('unsafe', function($sce) {
  return function(val) {
      return $sce.trustAsHtml(val);
  }; 
});