ng-bind-html 中的 AngularJS 指令

Question

在我正在处理的应用程序中，一项服务为应用程序提供了一个包含 HTML 的 json。我在这样的模板中输出 HTML:

<div ng-bind-html="renderHtml(widget.article.body)"></div>

此 HTML 可能包含自定义指令，如内联图表:

directiveModule.directive('inlineChart', function(){
    return {
        restrict: 'A',
        scope: { inline-widget:'=elem' },
        template: '<p ng-bind="inline-widget.blah"></p>'
    };
});

如果我在模板中正常使用该指令，一切正常，但在带有 renderHtml 函数的 ng-bing-html 中使用时似乎没有被触及。

非常感谢任何有关如何实现这一点的建议!

Answer 1

参见 https://stackoverflow.com/a/31880192/1345244

添加此指令 angular-bind-html-compile

.directive('bindHtmlCompile', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.$watch(function () {
        return scope.$eval(attrs.bindHtmlCompile);
      }, function (value) {
        // Incase value is a TrustedValueHolderType, sometimes it
        // needs to be explicitly called into a string in order to
        // get the HTML string.
        element.html(value && value.toString());
        // If scope is provided use it, otherwise use parent scope
        var compileScope = scope;
        if (attrs.bindHtmlScope) {
          compileScope = scope.$eval(attrs.bindHtmlScope);
        }
        $compile(element.contents())(compileScope);
      });
    }
  };
}]);

像这样使用它:

<div bind-html-compile="data.content"></div>

真的很简单:)