如何在指令中使用 ng-bind-html？

Question

我正在使用基于我的 JSON 的模板。所以，我不能像往常那样使用我的 ng-bind-html。

似乎我唯一的选择是在指令中使用经过清理的 html。 寻找类似的问题，我无法弄清楚如何在我的情况下申请。 是的，我是 Angular 的新手。

我目前正在从我的控制器接收此数据：

$scope.safecontainers = $sanitize($scope.containersmsg);

在我的html中通常是这样的：

<p ng-bind-html="containersmsg"></p>

但我不想要这个，我需要在指令中使用这个 ng-bind-html！

有些人谈到了 $compile，但我真的不知道如何在我的情况下应用。

编辑：

基于cmets，我将添加更多代码，以帮助大家进一步了解我的目标。

在我的 index.html 中，我声明了所需的控制器并调用了我的

<ng-view></ng-view>

然后，根据我收到的内容，我将加载一个或另一个视图：

      <div ng-if='setores[0].SetorTema == "1"'>
        <theme-one titulo="{{setores[0].SetorNome}}" logo="
            {{setores[0].SetorLogo}}" evento="{{evento[0].EventoNome}}">
        </theme-one>
 // I omitted some of the parameters because they ain't relevant
      </div>

我的模板是这样的：（只做一小部分，避免出现很多无用的代码）

  <section class="target">
    <div class="col-md-6 col-xs-12">
        <div class="" ng-repeat="banner in title">
            <div class="target-title">{{ banner.BannerLevelTitulo }}
            </div>
            <div class="target-desc">{{banner.BannerLevelDescricao}}</div>
        </div>
    </div>
    <div class="col-md-6 col-xs-hidden">
        <div class="target-image"><img ng-src="{{targetimage}}" alt="">
        </div>
    </div>
</section>

这是我想要我的净化代码的控制器。

hotsite.controller('containerController', function($scope, $http, $sanitize) 
{


$scope.containers = [];
$scope.containersmsg = '';
$scope.safecontainers = $sanitize($scope.containersmsg);

$http.get('/Admin/rest/getContainer')
.then(function onSuccess(response) {
    var data = response.data;
    $scope.containers = data;

      $scope.containers = response.data.filter(containers => 
containers.ContainerAtivo);
      $scope.containersmsg = $scope.containers[0].ContainerDesc;
  })
 .catch(function onError(response) {
    var data = response.data;
    console.log(data);
  });
});

这是我的指令的一部分：

    angular.module('hotsiteDirectives', [])
.directive('themeOne', function($compile) {
  var ddo = {};

     ddo.restrict = "AE";
     ddo.transclude = true;

     ddo.scope = {
         titulo: '@',
         ...
         (a lot of other scope's)
         contimg: '@'
     };

     ddo.templateUrl = 'app/directives/theme-one.html';

     return ddo;
 })

是的，我正在调用 ngSanitize

var hotsite = angular.module('hotsite',['ngRoute', 'hotsiteDirectives', 
'ngSanitize']);

TL;DR

这是我的代码在指令中的样子，带有原始 html 且未呈现：

这就是它与 ng-bind-html 的工作方式，格式化的 html

如果我确实把它放在我的视图中

    <p ng-bind-html="containersmsg"></p>

没关系，一切正常。

但是，我只需要在我的指令中调用它，我不知道该怎么做。 因此，在这种情况下：

如何将经过净化的 html 放入指令和模板中？

Answer 1

您甚至不必相信 html 可以使用 ngBindHtml 呈现它，因为该指令已经为您完成了。您基本上需要为您的指令创建一个参数属性来保存 html 字符串，因此，在指令的模板中，您使用 ng-bind-html="myParam"。

下面的 sn-p 实现了创建一个指令的简单演示，该指令接收并呈现来自控制器的 html 输入参数。

angular.module('app', ['ngSanitize'])
  .controller('AppCtrl', function($scope) {
    $scope.myHtml = '<div><b>Hello!</b> I\'m an <i>html string</i> being rendered dynamicalli by <code>ngBindHtml</code></div>';
  })
  .directive('myDirective', function() {
    return {
      template: '<hr><div ng-bind-html="html"></div><hr>',
      scope: {
        html: '='
      }
    };
  });

<div ng-app="app" ng-controller="AppCtrl">
  <my-directive html="myHtml"></my-directive>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-sanitize.js"></script>