ng-bind-html 中的 AngularJS 指令 [英] AngularJS directive in ng-bind-html

问题描述

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

In the application I am working on, a service supplies the app with a json, containing HTML. I output the HTML in a template like this:

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

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

This HTML may contain custom directives, like an inline-chart:

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

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

If I use the directive normally in a template, everything works fine, but it seems it is not being touched when used in ng-bing-html with the renderHtml function.

非常感谢任何如何实现这一点的建议！

Any suggestions how this could be realised are very much appreciated!

推荐答案

您需要导入 ngSanitize 模块并使用 $sce 服务.它应该看起来像这样:

You need to import the ngSanitize module and use the $sce service. It should look something like this:

// 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 标记为受信任.您可以在此处

In short, the $sce service will mark the html as trusted. You can find documentation here

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

I realize I may have not answered the question. It seems that you're asking about binding scope variables to the directive that is rendered within your directive? In order to get elements to compile properly, you're going to have to use the $compile service and change your logic up a bit. First, the template:

<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);
        });
      }
    };
  });

您可以在此处找到编译文档.希望这是您正在寻找的更全面的答案.

You can find the compile documentation here. Hopefully this is a more comprehensive answer to what you're looking for.

编辑 2: 为说明起见，该指令在页面上应如下所示:

EDIT 2: For clarification, the directive should look like this on the page:

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

place-directive-here 类只是指令的句柄，用于查找您的 <p> 标记并在其中呈现.但是，如果 angular 不关心在 my-directive 内部呈现的 html，我提供的第一个解决方案应该可以正常工作，并且 my-directive 的模板属性> 应该是:

The place-directive-here class is just a handle for the directive to find your <p> tag and render inside of it. However, if angular is not concerned with the html that is rendered inside of my-directive, the first solution that I provided should work just fine and the template property of my-directive should be:

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

这篇关于ng-bind-html 中的 AngularJS 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！