Questo è il mio modelloCome rendering HTML con i modelli angolari
<div class="span12">
<ng:view></ng:view>
</div>
e questo è il mio modello di vista
<h1>{{ stuff.title}}</h1>
{{stuff.content }}
Ora sto ottenendo il content come html e voglio visualizzare che in vista .
ma tutto quello che sto ottenendo è codice html grezzo. come posso render che in formato HTML effettivo
uso-
<span ng-bind-html="myContent"></span>
devi dire angolare di non sfuggire.
È un refuso - intendeva " '. L'API –
è stata modificata in AngularJS 1.2. http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu – amccausl
amccausl ha salvato nuovi utenti angolari per innumerevoli ore di debugging a causa di angular "hell docs", ng-bind-html-unsafe è deprecato e si prega di fare riferimento al link che si trova nel commento sopra per risolvere la risposta. – rjm226
Così forse si desidera avere questo nel vostro index.html per caricare la libreria, sceneggiatura, e inizializzare l'applicazione con una vista:
<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>
Poi yourView.html potrebbe essere solo:
<div>
<h1>{{ stuff.h1 }}</h1>
<p>{{ stuff.content }}</p>
</div>
scripts.js potrebbe avere il controller con dati $ scope ad esso.
angular.module('yourApp')
.controller('YourCtrl', function ($scope) {
$scope.stuff = {
'h1':'Title',
'content':"A paragraph..."
};
});
Infine, dovrete config percorsi e assegnare il controller per vederlo per la sua $ portata (cioè il vostro oggetto di dati)
angular.module('yourApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/yourView.html',
controller: 'YourCtrl'
});
});
non ho ancora testato questo, scusate se c'è un bug, ma credo che questo è il modo per ottenere i dati Angularish
Cosa succede se voglio questo stesso comportamento ma non dipende da routeProvider? –
E 'lo stesso con ui-router, solo che è $ stateProvider invece di $ routeProvider e .state ('yourState', { url: '/', TemplateURL: 'yourView.html', regolatore: 'YourCtrl' }); – irth
shoud seguire la documentazione angolari e l'uso $ sce - $ SCE è un servizio che fornisce servizi severi Escaping contestuali a AngularJS. Ecco un docs: http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe
Facciamo un esempio con il caricamento di asynchroniously Eventbrite pulsante di accesso
nel controller:
someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin',
function($scope, $sce, eventbriteLogin) {
eventbriteLogin.fetchButton(function(data){
$scope.buttonLogin = $sce.trustAsHtml(data);
});
}]);
Secondo lei basta aggiungere:
<span ng-bind-html="buttonLogin"></span>
Nella tua servizi:
someAppServices.factory('eventbriteLogin', function($resource){
return {
fetchButton: function(callback){
Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
callback(widget_html);
})
}
}
});
Per fare ciò, utilizzo un filtro personalizzato.
Nella mia app:
myApp.filter('rawHtml', ['$sce', function($sce){
return function(val) {
return $sce.trustAsHtml(val);
};
}]);
Poi, nella vista:
<h1>{{ stuff.title}}</h1>
<div ng-bind-html="stuff.content | rawHtml"></div>
Dove si trova il codice HTML provenienti da? In circostanze diverse, ti consigliamo 'ngBindHtmlUnsafe',' ngSanitize' o una direttiva personalizzata. –
L'html proviene dal mio database – user194932147
Il contenuto * è assolutamente affidabile? –