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>

非常简单：）

Answer 2

您需要导入ngSanitize模块并使用$sce服务。看起来应该是这样的：

// Remember the following comes from angular-sanitize.js found on the angular website and
// also must be included in the web app.
angular.module('myApp', ['ngSanitize']);
angular.module('myApp')
  .controller('MyCtrl', function($scope, $sce) {
    //... other controller code
    $scope.renderHtml = function(html) {
      return $sce.trustAsHtml(html);
    };
  });

简而言之，$sce服务会将html标记为受信任。您可以找到文档here

编辑：我意识到我可能没有回答这个问题。您似乎在询问将范围变量绑定到指令中呈现的指令？为了使元素能够正确编译，您将不得不使用$compile服务并稍微改变逻辑。首先，模板：

<p class="place-directive-here"></p>

然后是指令：

angular.module('myApp')
  .directive('myDirective', function($compile) {
    return {
      scope: {
        inlineWidget: '='
      },
      template: '<p class="place-directive-here"></p>',
      link: function(scope, elem, attrs) {
        var placement = elem.find('.place-directive-here');
        scope.$watch('inlineWidget', function(widget){
          if(!widget){
            return;
          }
          // Compile the html against the scope. This will bind the dom to your
          // current scope
          var newElement = $compile(widget.blah)(scope);
          // Place in the view
          placement.html(newElement);
        });
      }
    };
  });

您可以找到编译文档here。希望这是对您正在寻找的内容的更全面的答案。

编辑2：为了澄清，该指令在页面上应如下所示：

<div my-directive inline-widget="someInlineWidget"></div>

place-directive-here类只是指令的一个句柄，用于查找<p>标记并在其中进行渲染。但是，如果angular与my-directive内部呈现的html无关，那么我提供的第一个解决方案应该可以正常工作，my-directive的模板属性应该是：

template: '<p ng-bind-html="renderHtml(inlineWidget.blah)"></p>'

Answer 3

具有 HTML标记

的 Angular指令的示例

查看Plunker

上的工作示例

此示例显示如何通过传递md-card和directive以及包含锚标记title

的内容在content内创建<a>

$sce.trustAsHtml link使用$sce scope <div ng-app="myApp"> <my-app-card title="Card Title" content="Card Content with anchor <a href='http://www.google.com' target='_blank'> Google </a>"></my-app-card> </div>当var app = angular.module("myApp",['ngMaterial']) .directive ('myAppCard', ['$sce', function($sce){ return { scope:{ title:"@title", content:"@content"}, link : function(scope, element, attr) { var hcont = $sce.trustAsHtml(attr.content); var html = "<md-card><md-card-content><h2>"+ attr.title + "</h2><p>"+ hcont +"</p></md-card-content></md-card>"; scope.$watch('myAppCard', function() { element.append(html); } ) } } }]);

<强> HTML

super

<强> JS

Thread.__init__

ng-bind-html中的AngularJS指令

3 个答案: