如何使用ng-bind-html在部分中呈现HTML,并在ng-repeat-> ng-switch -> ng-include中呈现$sce?



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

这里有一个笨蛋来说明。

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

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

任何帮助都非常感谢!谢谢

这是项目 A 的工作 plunker。

我只是将ItemCtrl移动到模板内以ng-include. 我认为主要问题是访问外部范围。

模板现在为:

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

修复: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-switchng-include。将directives与模糊的优先级混合在一起并不总是明智的:ng-include正在创建一个继承自父范围的范围,但controller的范围仍然是独立的。

使控制器的作用域成为父作用域解决了这个问题。

另一种方式:

索引.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>

普伦克示例

最新更新