Comment rendre html avec des modèles angulaires

C'est mon modèle

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

Et c'est mon modèle de vue

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

Maintenant, je reçois le content tant que html et je veux afficher cela en vue.

Mais tout ce que je reçois est un code html brut. Comment puis-je le rendre en html actuel?

MISE À JOUR Dans angular 1.2 ng-bind-html-unsafe est obsolète.

Utilisation-

 <span ng-bind-html="myContent"></span>

Et dans l'utilisation du contrôleur-

 $scope.myContent= $sce.trustAsHtml(stuff.content);

Vous devez dire à l'angulaire de ne pas l'échapper. C'est une opération dangereuse, donc vous devez indiquer explicitement que vous faites une demande dangereuse.

 <span ng-bind-html-unsafe="stuff.content"></span>

Désolé, erreur de frappe ici: http://plnkr.co/edit/yG79IZUI5i97UZj40ddn?p=preview

Pour ce faire, j'utilise un filtre personnalisé.

Dans mon application:

 myApp.filter('rawHtml', ['$sce', function($sce){ return function(val) { return $sce.trustAsHtml(val); }; }]);

Ensuite, dans la vue:

 <h1>{{ stuff.title}}</h1> <div ng-bind-html="stuff.content | rawHtml"></div>

Vous devez suivre les documents Angulaires et utiliser $ sce – $ sce est un service qui fournit des services Strict Contextual Escaping à AngularJS. Voici un document: http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe

Prenons un exemple en chargeant de manière asynchrone le bouton de connexion Eventbrite

Dans votre contrôleur:

 someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin', function($scope, $sce, eventbriteLogin) { eventbriteLogin.fetchButton(function(data){ $scope.buttonLogin = $sce.trustAsHtml(data); }); }]);

À votre avis, ajoutez simplement:

 <span ng-bind-html="buttonLogin"></span>

Dans vos services:

 someAppServices.factory('eventbriteLogin', function($resource){ return { fetchButton: function(callback){ Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){ callback(widget_html); }) } } });

Donc, peut-être que vous voulez avoir cela dans votre index.html pour charger la bibliothèque, le script et initialiser l'application avec une vue:

 <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>

Ensuite, votreView.html pourrait simplement être:

 <div> <h1>{{ stuff.h1 }}</h1> <p>{{ stuff.content }}</p> </div>

Scripts.js pourrait avoir votre contrôleur avec les données $ scope'd à lui.

 angular.module('yourApp') .controller('YourCtrl', function ($scope) { $scope.stuff = { 'h1':'Title', 'content':"A paragraph..." }; });

Enfin, vous devrez configurer les routes et affecter le contrôleur à la vue pour sa portée $ (c'est-à-dire votre objet de données)

 angular.module('yourApp', []) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/yourView.html', controller: 'YourCtrl' }); });

Je n'ai pas testé cela, désolé s'il y a un bug, mais je pense que c'est la façon angélique d'obtenir des données