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.

为澄清起见，该指令在页面上应如下所示:

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屋！