这是我的模板：
<div class="span12">
<ng:view></ng:view>
</div>
这是我的视图模板：
<h1>{{stuff.title}}</h1>
{{stuff.content}}
我得到contentas html，我想在视图中显示它，但我得到的只是原始 html 代码。如何呈现该 HTML？
如何使用 AngularJS 模板渲染 html
IT技术
javascript
angularjs
2021-02-22 08:18:32
5个回答
利用-
<span ng-bind-html="myContent"></span>
你需要告诉 angular 不要逃避它。
为此，我使用了自定义过滤器。
在我的应用程序中：
myApp.filter('rawHtml', ['$sce', function($sce){
return function(val) {
return $sce.trustAsHtml(val);
};
}]);
然后，在视图中：
<h1>{{ stuff.title}}</h1>
<div ng-bind-html="stuff.content | rawHtml"></div>
在 angular 4+ 中，我们可以使用innerHTMLproperty 而不是ng-bind-html.
就我而言，它正在工作，我正在使用angular 5。
<div class="chart-body" [innerHTML]="htmlContent"></div>
in.ts 文件
let htmlContent = 'This is the `<b>Bold</b>` text.';
您应该遵循 Angular 文档并使用 $sce - $sce 是一项为 AngularJS 提供严格上下文转义服务的服务。这是一个文档：http ://docs-angularjs-org-dev.appspot.com/api/ng.directive: ngBindHtmlUnsafe
以异步加载Eventbrite登录按钮为例
在您的控制器中：
someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin',
function($scope, $sce, eventbriteLogin) {
eventbriteLogin.fetchButton(function(data){
$scope.buttonLogin = $sce.trustAsHtml(data);
});
}]);
在您看来，只需添加：
<span ng-bind-html="buttonLogin"></span>
在您的服务中：
someAppServices.factory('eventbriteLogin', function($resource){
return {
fetchButton: function(callback){
Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
callback(widget_html);
})
}
}
});
因此，也许您希望在 index.html 中包含此内容以加载库、脚本并使用视图初始化应用程序：
<html>
<body ng-app="yourApp">
<div class="span12">
<div ng-view=""></div>
</div>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
那么 yourView.html 可能只是：
<div>
<h1>{{ stuff.h1 }}</h1>
<p>{{ stuff.content }}</p>
</div>
scripts.js 可以让您的控制器带有 $scope 数据。
angular.module('yourApp')
.controller('YourCtrl', function ($scope) {
$scope.stuff = {
'h1':'Title',
'content':"A paragraph..."
};
});
最后，您必须配置路由并分配控制器以查看它的 $scope（即您的数据对象）
angular.module('yourApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/yourView.html',
controller: 'YourCtrl'
});
});
我还没有测试过这个，如果有错误，抱歉，但我认为这是获取数据的 Angularish 方式