Javascript $sce.trustAsHtml和ng展会

我有一个javascript字符串，其中有几行html显示在我的ionic应用程序中

<div ng-bind-html="strVar | to_trusted"></div>

---

如代码笔所示，以这种方式显示html时，ng show和ng hide不起作用。如何使其按预期运行？

您当前遇到的问题是Angular按照您的意愿将文本视为HTML正确，但这样做之后，它不会像Angular模板一样绑定到新属性和类

这种行为并不是Angular设计中的缺陷，而是防止特定指令不能使站点完全无响应。试想一下，如果它需要重新评估生成的HTML的每一个新部分，以获得新的指令和绑定，那么它很可能会进入一个永无止境的执行和检查循环

不要使用动态模板

解决问题的第一种方法是改变方法：不要使用动态模板。您这样做的原因很可能是为了允许用户输入生成模板（这成为一个安全问题，XSS的潜在条目），或者第三方系统正在为您生成HTML，这也是一个坏主意，因为问题与系统分离（如果您的系统应该生成HTML，那么它不应该混淆其他源，更不用说信任它们了）

使用指令

如果插入HTML的原因是为了重用HTML，那么您可能要寻找的是指令，这是一个角度组件，允许您准确地执行该操作：重用和隔离与生成的HTML紧密耦合的行为

下面是一个来自的快速示例：

动态模板化

如果您真的想使用动态模板，有一种方法可以做到。您可以使用与上面示例相同的方法创建一个指令，而不是将模板硬编码到指令（或模板文件）中，您可以将模板的内容动态地馈送到

链接

函数中，并使用提供的范围自行编译，如下所示：

角度模块（'variableDirective'，[]） .controller（'controller'，['$scope'，function（$scope）{ $scope.customer1={ 名字：“娜奥米”， 地址：“1600圆形剧场” }; $scope.customer2={ 姓名：'约瑟夫'， 地址：'123假街' }; }]) .directive（'myCustomer'，函数（$compile）{ var getTemplate=函数（attrs）{ 变量isVip=attrs.type==“vip”； 返回isVip ？“（VIP）名称：{{customer.Name}}--（隐藏VIP地址）” ：“名称：{{customer.Name}}--地址：{{customer.Address}” }; 变量链接器=函数（范围、元素、属性）{ var-template=getTemplate（attrs）； html（模板）； $compile（element.contents（））（范围）； }; 返回{ 限制：'E'， 链接：链接器， 范围：{ 客户：'=信息' } }; })；

答案不够详细，但angular基本上没有将HTML作为模板，而是作为原始HTML。您应该了解如何动态加载模板。正如Alpha所说，您添加的是未编译的HTML。这是您在指令中执行的操作，而不是在控制器中执行的操作。在本例中，我要说的是识别错误并指向“正确的方向绝对足以保证答案，@Alpha.”当然，@Jan.“（对不起，不得不冒这个险。）认真地说，我刚刚写了一个详细的答案，你可以看出为什么我认为它不适合评论。谢谢你的鼓励——这是我开始写答案的第一个原因。=）哇，太夸张了，干得好我认为，既然解决方案远远超出了问题的范围，那么指出正确的方向就足以保证得到答案。

    .filter('to_trusted', ['$sce', function($sce){
  return function(text) {
    return $sce.trustAsHtml(text);
  };
}])