如何使用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方式

  • orderBy之后Angularjs错误$ index
  • 用Angular.js拦截器捕获HTTP 401
  • Ng-click在ng-repeat内不起作用
  • AngularJS手动呈现控制器和模板
  • 没有其他的HTML的angularjs换行符filter
  • 在不同的元素上使用相同的控制器来引用同一个对象
  • 如何在Angular.jsselect框中有一个默认选项
  • 有没有一种简单的方法来使用button导航页面作为链接在angularjs中做
  • 我怎样才能使用TypeScript定义我的控制器?
  • AngularJS - 模型不会更新由ng-repeat生成的单选button
  • AngularJS CORS问题