如何在 ng-repeat -> ng-switch -> ng-include 中使用 ng-bind-html 和 $sce 部分呈现 HTML？答案

【问题标题】：How to render HTML in a partial with ng-bind-html and $sce inside ng-repeat -> ng-switch -> ng-include?如何在 ng-repeat -> ng-switch -> ng-include 中使用 ng-bind-html 和 $sce 部分呈现 HTML？
【发布时间】：2013-11-21 21:45:09
【问题描述】：

正如标题中提到的，我不知道如何使用 ng-bind-html 在部分内部呈现 html。

这里有一个 plunker 来说明。

http://plnkr.co/edit/YFfHsahcum7XA8GcH6b2?p=preview

我尝试了 ng-bind、ng-bind-html、$sce.trustAsHtml、{{HTMLString}} 的几种组合，但都没有奏效。也许我错过了一些完全不同的东西？

非常感谢任何帮助！谢谢

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-ng-include

【解决方案1】：

这是项目 A 的 working plunker。

我只在ng-include 的模板中移动了ItemCtrl。我认为主要问题是访问外部范围。

模板现在是：

Item A: 
<div ng-bind-html="trustedContent" ng-controller='ItemCtrl'></div>

【讨论】：

【解决方案2】：

修复：http://plnkr.co/edit/7qd3INmYAmUfJPluwfem?p=preview

  <div ng-controller='ItemCtrl'>
    <div ng-switch on="item.type">

        <div ng-switch-when="A">
            <div ng-include='"item_A.html"' ></div>
        </div>

        <div ng-switch-when="B">
            <div ng-include='"item_B.html"'></div>
        </div>

    </div>
  </div>

我已将ItemCtrl 定义移到ng-switch 和ng-include 之外。将directives 与不明确的优先级混合在一起并不总是明智的：ng-include 正在创建一个继承自父范围的范围，但 controller 的范围仍然是独立的。

将控制器的作用域设置为父作用域解决了这个问题。

【讨论】：

感谢您的澄清...我将 Davin 的回答标记为已接受，这样我就可以按 item.type 绑定不同的控制器。

【解决方案3】：

另一种方式：

index.html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script data-require="angular.js@1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
  <script data-require="angular-sanitize@*" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular-sanitize.min.js"></script>
  <style>
    .ac {
      background-color: yellow;
    }
    .bc {
      background-color: orange;
    }
  </style>
  <script>
    var app = angular.module('plunker', ['ngSanitize']);
    app.controller('MainCtrl', function($scope) {
      $scope.items = [{
        "type": "A",
        "url": "item_A.html",
        "content": "<div class=\"ac\">content A</div>"
      }, {
        "type": "B",
        "url": "item_B.html",
        "content": "<div class=\"bc\">content B</div>"
      }]
    });
  </script>
</head>

<body ng-controller="MainCtrl">

  <div ng-repeat="item in items">
    <div ng-switch on="item.type">
      <div ng-switch-when="A">
        <div ng-include="item.url"></div>
      </div>
      <div ng-switch-when="B">
        <div ng-include="item.url"></div>
      </div>
    </div>
  </div>

</body>

</html>

item_A.html：

Item A: 
<div ng-bind-html="item.content"></div>

item_B.html：

Item B: 
<div ng-bind-html="item.content"></div>

Plunker example

【讨论】：

这很有趣。不需要$sce？！