如何使用angular模板呈现HTML
这是我的模板
<div class="span12"> <ng:view></ng:view> </div> 这是我的视图模板
<h1>{{ stuff.title}}</h1> {{stuff.content }}
现在我得到的content为HTML，我想显示在视图中。
但我所得到的是原始的HTML代码。 我怎么可以呈现为实际的HTML
使用-
<span ng-bind-html="myContent"></span>
你需要告诉angular度不能逃脱它。
为此，我使用自定义filter。
在我的应用程序：
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文档并使用$ sce – $ sce是一项为AngularJS提供严格上下文转义服务的服务。 这是一个文档： http ://docs-angularjs-org-dev.appspot.com/api/ng.directive: ngBindHtmlUnsafe
以asynchronous加载Eventbriteloginbutton为例
在你的控制器中：
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可以让你的控制器的数据$作用于它。
angular.module('yourApp') .controller('YourCtrl', function ($scope) { $scope.stuff = { 'h1':'Title', 'content':"A paragraph..." }; });
最后，你必须configuration路由并分配控制器来查看它的$ scope（即你的数据对象）
angular.module('yourApp', []) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/yourView.html', controller: 'YourCtrl' }); });
我没有testing过这个，对不起，如果有一个错误，但我认为这是获取数据的Angularish方式
