Question

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

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

我正在从我的控制器接收这些数据：

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

在我的HTML中通常会是这样的：

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

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

有些人谈到$ compile，但我无法弄明白如何申请。

修改

根据评论，我会添加更多代码，以帮助您进一步了解我的目标。

在我的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"。

以下代码段实现了一个简单的演示，即创建一个接收和呈现来自控制器的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>

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

1 个答案: