Como renderizar html com modelos AngularJS

Este é o meu modelo:

e este é o meu modelo de visão:

 

{{stuff.title}}

{{stuff.content}}

Eu estou recebendo o content como HTML e quero mostrar isso em uma visão, mas tudo o que eu estou recebendo é o código html em bruto. Como posso renderizar esse HTML?

Usar-

  

Você precisa dizer angular para não escaping.

Para fazer isso, eu uso um filtro personalizado.

Na minha aplicação:

 myApp.filter('rawHtml', ['$sce', function($sce){ return function(val) { return $sce.trustAsHtml(val); }; }]); 

Então, na visão:

 

{{ stuff.title}}

Você deve seguir os documentos do Angular e usar o $ sce – $ sce é um serviço que fornece serviços de Escape Contextual Escapando para o AngularJS. Aqui está um documento: http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe

Vamos dar um exemplo com o carregamento asynchronous do botão de login do Eventbrite

No seu controlador:

 someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin', function($scope, $sce, eventbriteLogin) { eventbriteLogin.fetchButton(function(data){ $scope.buttonLogin = $sce.trustAsHtml(data); }); }]); 

Na sua opinião, basta adicionar:

  

Nos seus serviços:

 someAppServices.factory('eventbriteLogin', function($resource){ return { fetchButton: function(callback){ Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){ callback(widget_html); }) } } }); 

Então, talvez você queira ter isso em seu index.html para carregar a biblioteca, o script e inicializar o aplicativo com uma visualização:

   

Então yourView.html poderia ser apenas:

 

{{ stuff.h1 }}

{{ stuff.content }}

scripts.js poderia ter seu controlador com dados $ scope’d para ele.

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

Por último, você terá que configurar as rotas e atribuir o controlador para visualizar seu escopo $ (ou seja, seu object de dados)

 angular.module('yourApp', []) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/yourView.html', controller: 'YourCtrl' }); }); 

Eu não testei isso, desculpe se há um bug, mas eu acho que essa é a maneira angular de obter dados

Em angular 4+, podemos usar a propriedade innerHTML em vez de ng-bind-html .

No meu caso, está funcionando e estou usando angular 5 .

 

Arquivo In.ts

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