javascript - $sce.trustAsHtml 和 ng-show

Question

http://codepen.io/pondnetic/pen/qdxGVV

我的 ionic 应用程序中显示了一个由几行 html 组成的 javascript 字符串

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

to_trusted 是一个使用 $sce 的简单过滤器

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

如 codepen 所示，当以这种方式显示 html 时，ng-show 和 ng-hide 不起作用。我怎样才能让它按预期运行？

Answer 1

您当前遇到的问题是 Angular 将您的文本作为 HTML 正确处理，正如您所希望的那样，但在这样做之后，它不会像 Angular 模板那样绑定(bind)到新的属性和类。

这种行为并不是 Angular 设计中的缺陷，而是为了防止特定指令无法使网站完全无响应。想想如果它需要为新的指令和绑定(bind)重新评估每个新生成的 HTML 片段，它很可能会进入一个永无止境的执行和检查循环。

不要使用动态模板

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

使用指令

如果您插入 HTML 的原因是为了重用 HTML，那么您可能正在寻找的是指令，这是一个 Angular 组件，它允许您做到这一点:重用和隔离与生成的 HTML 紧密耦合的行为。

这是来自 directive documentation 的一个简单示例:

动态模板

如果您真的想使用动态模板，有一种方法可以做到。您将以与上述示例完全相同的方式创建一个指令，但不是将模板硬编码到指令(或模板文件)中，您可以动态地将模板的内容提供到 link 函数并使用提供的范围自行编译，如下所示:

angular.module('variableDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.customer1 = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
    $scope.customer2 = {
      name: 'Joseph',
      address: '123 Fake St'
    };
  }])
  .directive('myCustomer', function($compile) {
    var getTemplate = function(attrs) {
      var isVip = attrs.type === "vip";
      return isVip
        ? "(VIP) Name: {{customer.name}} -- (VIP address hidden)"
        : "Name: {{customer.name}} -- Address: {{customer.address}}"
    };
  
    var linker = function(scope, element, attrs) {
      var template = getTemplate(attrs);
      element.html(template);
      $compile(element.contents())(scope);
    };
  
    return {
      restrict: 'E',
      link: linker,
      scope: {
        customer: '=info'
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="variableDirective">
  <div ng-controller="Controller">
    <my-customer type="regular" info="customer1"></my-customer>
    <br />
    <my-customer type="vip" info="customer2"></my-customer>
  </div>
</div>

但请注意，这是必要的，因为模板的编译发生在指令实例化之后，因此您无法在指令定义时访问范围或属性。

您可以在此处找到更详细的解释和可重用的方法(我的示例基于该方法):http://onehungrymind.com/angularjs-dynamic-templates/