正如标题中提到的,我不知道如何使用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-switch
和ng-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>
普伦克示例