Dies ist meine VorlageWie html mit Winkelschablonen machen
<div class="span12">
<ng:view></ng:view>
</div>
und das ist meine Ansicht nach Vorlage
<h1>{{ stuff.title}}</h1>
{{stuff.content }}
Nun ich die content als html bin immer, und ich will, dass in Ansicht anzuzeigen .
aber alles, was ich bekomme ist roher HTML-Code. wie kann ich machen, dass als tatsächlicher html
Einsatz-
<span ng-bind-html="myContent"></span>
Sie müssen Winkel sagen, nicht zu entkommen.
Es ist ein Tippfehler - er meinte ' '. –
API wurde in AngularJS 1.2 geändert. http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu – amccausl
amccausl hat neue eckige Benutzer unzählige Stunden des Debuggens gespeichert Aufgrund der eckigen "Hell Docs" ist ng-bind-html-unsafe veraltet und bitte lesen Sie den Link im obigen Kommentar, um die Antwort zu lösen. – rjm226
Vielleicht möchten Sie dies in Ihrer index.html haben, die Bibliothek, Skript zu laden, und initialisieren Sie die App mit Aussicht:
<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>
Dann könnte yourView.html einfach sein:
<div>
<h1>{{ stuff.h1 }}</h1>
<p>{{ stuff.content }}</p>
</div>
scripts.js könnte Ihren Controller mit Daten $ scope'd haben.
angular.module('yourApp')
.controller('YourCtrl', function ($scope) {
$scope.stuff = {
'h1':'Title',
'content':"A paragraph..."
};
});
Schließlich werden Sie Routen Config haben und den Controller für es $ Umfang (dh Ihr Datenobjekt)
angular.module('yourApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/yourView.html',
controller: 'YourCtrl'
});
});
ich nicht getestet haben anzuzeigen zuweisen, sorry, wenn es gibt eine Fehler, aber ich denke, das ist der Angularish Weg, um Daten zu erhalten
Was ist, wenn ich das gleiche Verhalten will, aber nicht von routeProvider abhängig? –
Es ist das gleiche ui-Router verwenden, nur dann ist es $ stateProvider statt $ routeProvider und .state ('Yourstate', { url: '/', templateUrl: 'yourView.html', Controller: 'YourCtrl' }); – irth
Sie sollten die Angular Docs folgen und $ sce verwenden - $ sce ist ein Dienst, der AngularJS Strict Contextual Escaping-Dienste bietet. Hier ist eine docs: http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe
Nehmen wir ein Beispiel nehmen mit asynchroniously Laden Eventbrite Login-Button
In Ihrem Controller:
someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin',
function($scope, $sce, eventbriteLogin) {
eventbriteLogin.fetchButton(function(data){
$scope.buttonLogin = $sce.trustAsHtml(data);
});
}]);
Ihrer Ansicht nach nur hinzufügen:
<span ng-bind-html="buttonLogin"></span>
In Ihrem Dienstleistungen:
someAppServices.factory('eventbriteLogin', function($resource){
return {
fetchButton: function(callback){
Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
callback(widget_html);
})
}
}
});
Um dies zu tun, verwende ich einen benutzerdefinierten Filter.
In meiner App:
myApp.filter('rawHtml', ['$sce', function($sce){
return function(val) {
return $sce.trustAsHtml(val);
};
}]);
Dann in der Ansicht:
<h1>{{ stuff.title}}</h1>
<div ng-bind-html="stuff.content | rawHtml"></div>
Wo ist der HTML kommen? Unter anderen Umständen möchten Sie "ngBindHtmlUnsafe", "ngSanitize" oder eine benutzerdefinierte Anweisung. –
Der HTML kommt aus meiner Datenbank – user194932147
Ist der Inhalt * absolut * vertrauenswürdig? –