Dit is mijn sjabloon:
<div class="span12">
<ng:view></ng:view>
</div>
en dit is mijn weergavesjabloon:
<h1>{{stuff.title}}</h1>
{{stuff.content}}
Ik krijg de contentals html en ik wil dat in een weergave weergeven, maar ik krijg alleen onbewerkte html-code. Hoe kan ik die HTML weergeven?
Antwoord 1, autoriteit 100%
Gebruik-
<span ng-bind-html="myContent"></span>
Je moet angular vertellen om er niet aan te ontsnappen.
Antwoord 2, autoriteit 50%
Hiervoor gebruik ik een aangepast filter.
In mijn app:
myApp.filter('rawHtml', ['$sce', function($sce){
return function(val) {
return $sce.trustAsHtml(val);
};
}]);
Vervolgens, in de weergave:
<h1>{{ stuff.title}}</h1>
<div ng-bind-html="stuff.content | rawHtml"></div>
Antwoord 3, autoriteit 4%
In angular 4+ kunnen we de eigenschap innerHTMLgebruiken in plaats van ng-bind-html.
In mijn geval werkt het en ik gebruik hoekig 5.
<div class="chart-body" [innerHTML]="htmlContent"></div>
In.ts-bestand
let htmlContent = 'This is the `<b>Bold</b>` text.';
Antwoord 4, autoriteit 3%
Je moet de Angular-documenten volgen en $sce gebruiken – $sce is een service die Strict Contextual Escaping-services levert aan AngularJS. Hier is een document: http://docs-angularjs-org- dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe
Laten we een voorbeeld nemen met het asynchroon laden van de Eventbrite-inlogknop
In je controller:
someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin',
function($scope, $sce, eventbriteLogin) {
eventbriteLogin.fetchButton(function(data){
$scope.buttonLogin = $sce.trustAsHtml(data);
});
}]);
Voeg naar jouw mening toe:
<span ng-bind-html="buttonLogin"></span>
In uw diensten:
someAppServices.factory('eventbriteLogin', function($resource){
return {
fetchButton: function(callback){
Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
callback(widget_html);
})
}
}
});
Antwoord 5, autoriteit 2%
Dus misschien wil je dit in je index.html hebben om de bibliotheek, het script te laden en de app te initialiseren met een view:
<html>
<body ng-app="yourApp">
<div class="span12">
<div ng-view=""></div>
</div>
<script src="https://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
Dan zou yourView.html kunnen zijn:
<div>
<h1>{{ stuff.h1 }}</h1>
<p>{{ stuff.content }}</p>
</div>
scripts.js kan uw controller met gegevens $scope’d hebben.
angular.module('yourApp')
.controller('YourCtrl', function ($scope) {
$scope.stuff = {
'h1':'Title',
'content':"A paragraph..."
};
});
Ten slotte moet u routes configureren en de controller toewijzen om te bekijken voor zijn $scope (d.w.z. uw gegevensobject)
angular.module('yourApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/yourView.html',
controller: 'YourCtrl'
});
});
Ik heb dit niet getest, sorry als er een bug is, maar ik denk dat dit de hoekige manier is om gegevens te verkrijgen