Ceci est mon modèle
<div class="span12">
<ng:view></ng:view>
</div>
et ceci est mon modèle de vue
<h1>{{ stuff.title}}</h1>
{{stuff.content }}
Maintenant, je reçois le content en html et je veux afficher cela en vue.
mais tout ce que je reçois, c'est du code html brut. comment puis-je rendre cela en tant que HTML réel
Mise à JOUR Dans angulaire de 1,2 ng-bind-html-dangereux est obsolète.
Utilisez-
<span ng-bind-html="myContent"></span>
et dans le contrôleur de l'utilisation-
$scope.myContent= $sce.trustAsHtml(stuff.content);
Vous devez dire angulaire de ne pas y échapper. C'est une opération dangereuse, de sorte que vous devez explicitement état vous faites une demande dangereux.
<span ng-bind-html-unsafe="stuff.content"></span>
désolé, faute de frappe, débarquez ici: http://plnkr.co/edit/yG79IZUI5i97UZj40ddn?p=preview
Il est recommandé de suivre l'angle de documents et d'utiliser $sce - $sce est un service qui fournit une Stricte Contextuelle s'Échapper des services à AngularJS. Voici un docs: http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe
Prenons un exemple avec asynchroniously chargement Eventbrite bouton de connexion
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);
})
}
}
});
Alors peut-être que vous voulez avoir dans votre index.html pour charger la bibliothèque, de script et d'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>
Alors yourView.html peut simplement être:
<div>
<h1>{{ stuff.h1 }}</h1>
<p>{{ stuff.content }}</p>
</div>
scripts.js il pourrait y avoir du contrôleur de données $portée avais pour elle.
angular.module('yourApp')
.controller('YourCtrl', function ($scope) {
$scope.stuff = {
'h1':'Title',
'content':"A paragraph..."
};
});
Enfin, vous aurez la configuration des routes et d'attribuer le contrôleur de vue, c'est $champ d'application (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é, désolé si il y a un bug, mais je pense que c'est le Angularish façon à obtenir les données
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
