Comment rendre le HTML avec les modèles AngularJS

Ceci est mon modèle:

et ceci est mon modèle de vue:

 

{{stuff.title}}

{{stuff.content}}

Je reçois le content au format HTML et je veux l’afficher dans une vue, mais tout ce que j’obtiens, c’est du code HTML brut. Comment puis-je rendre ce HTML?

Utilisation-

  

Vous devez dire anguleux pour ne pas y échapper.

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:

 

{{ stuff.title}}

Vous devez suivre les documents angulars et utiliser $ sce – $ sce est un service qui fournit des services d’éviction contextuels ssortingcts à 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:

  

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 ceci dans votre index.html pour charger la bibliothèque, le script et initialiser l’application avec une vue:

   

Alors, votreView.html pourrait simplement être:

 

{{ stuff.h1 }}

{{ stuff.content }}

scripts.js pourrait avoir votre contrôleur avec des données $ scope’d à elle.

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

Enfin, vous devrez configurer les routes et assigner le contrôleur à afficher pour son $ scope (c.-à-d. Votre object 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 bogue, mais je pense que c’est la manière angularish d’obtenir des données

En angular 4+, nous pouvons utiliser la propriété innerHTML au lieu de ng-bind-html .

Dans mon cas, cela fonctionne et j’utilise angular 5 .

 

Fichier in.ts

 let htmlContent = 'This is the `Bold` text.';