Question

如标题中所述，我无法弄清楚如何使用ng-bind-html在部分内部渲染html。

这是一个可以说明的傻瓜。

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

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

非常感谢任何帮助！谢谢

Answer 1

这是项目A的working plunker。

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

现在

模板：

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

Answer 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的作用域仍然是独立的。

使控制器的范围成为父范围解决问题。

Answer 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

如何使用ng-bind-html和$ sce在ng-repeat中部分呈现HTML - ＆gt; ng-switch - ＆gt; NG-包括哪些内容？

3 个答案: