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

我正在使用基于JSON的模板。所以，我不能像通常那样使用我的ng绑定html

似乎我唯一的选择就是在指令中使用经过净化的html。 寻找类似的问题，我不知道如何在我的案例中应用。 是的，我是一个很新的角度

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

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

在我的html中，通常如下所示：

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

这是我的指令：

    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绑定html、格式化html一起工作的

如果我把它放在我的视野之内

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

一切都会好起来的，一切正常

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

---

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

您甚至不必信任html来使用它进行渲染，因为指令已经为您执行了。基本上，您需要为指令创建一个参数属性来保存html字符串，因此，在指令的模板中，您可以使用

ng bind html=“myParam”

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

angular.module（'app'，['ngSanitize']））
.controller（'AppCtrl'，函数（$scope）{
$scope.myHtml='Hello！我是一个html字符串，由
ngBindHtml
动态呈现；
})
.directive（'myDirective'，function（）{
返回{
模板：“
”，
范围：{
html:“=”
}
};
});

您是否尝试过
$sce.trustAsHtml（…）
？还有其他的功能吗？你的问题到底是什么还不清楚。指令在哪里声明？如何为正在传递的各种属性创建
$scope
属性？为什么要将这种HTML存储在数据变量中而不是普通的模板文件中？将HTML存储在变量中的唯一原因是，如果您计划让用户修改内容，但用户通常不会修改（甚至不知道）角度属性。。。。。这感觉就像你试图以一种不同于预期的方式使用AngularJs…@Claies我正在将这些变量传递给其他控制器，我只是省略了代码，因为它对问题没有价值。是的，我的用户将修改内容。问题是：如何在指令中使用经过净化的数据？这需要一些工作，因为这不是angular的设计用途。为您的用户提供
$scope
中可能存在的属性名称，要求他们使用角度语法，并希望他们不要进行可能以意外方式修改数据的打字或页面编辑（未选中），这似乎是一个非常糟糕的主意。
$sce
的全部目的是保护您免受可能输入HTML片段的恶意代码的侵害。通过让您的用户直接使用角度语法修改HTML，您实际上是在试图完全允许
$sce
所要阻止的事情。它已经在我的模块声明mate中，我没有放入我的代码，因为我认为它是隐式的。@AndréSousa所以，它应该已经起作用了。请提供剩下的代码，我不明白为什么这不起作用。@AndréSousa你想将一个html字符串作为属性参数传递给一个指令，并在指令中呈现它吗？@AndréSousa这确实很简单，只是因为angularjs的工作原理有点混乱。不管怎样，我已经用一个合适的解决方案更新了我的答案。@AndréSousa AngularJS是一个旧的框架，现在正走向弃用，所以我不建议在它上投入时间，除非你真的必须这样做。无论如何，学习angularjs原则的最好地方是在学习部分，有教程、免费课程等。你不需要学习更多的东西，只需要知道框架是如何工作的，一旦你知道了基础，当你面对这样的问题时，就更容易找到剩下的。干杯
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;
 })

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

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