如何使用angular模板呈现HTML

这是我的模板

<div class="span12"> <ng:view></ng:view> </div> 

这是我的视图模板

 <h1>{{ stuff.title}}</h1> {{stuff.content }} 

现在我得到的content为HTML,我想显示在视图中。

但我所得到的是原始的HTML代码。 我怎么可以呈现为实际的HTML

4 Solutions collect form web for “如何使用angular模板呈现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方式

  • Angularjs加载ajax请求的屏幕
  • 如何将除Web API之外的其他一切路由到/index.html
  • 使用ngpatternvalidation自然input数字
  • 在angularjs中编译和链接函数有什么区别
  • 用路由器解决dynamic参数
  • 从Angular中的服务器下载文本/ csv内容作为文件
  • angularjs:ng-src等效于background-image:url(...)
  • angularjs ng-style:background-image不起作用
  • 在angularJS单页面应用程序中使用javascript打印div
  • React vs Angular:使用React缓慢渲染
  • angularexpression式{{::}}中的两个冒号是什么意思?