Cómo renderizar html con plantillas AngularJS

Esta es mi plantilla:

y esta es mi plantilla de vista:

 

{{stuff.title}}

{{stuff.content}}

Estoy obteniendo el content como html y quiero mostrarlo en una vista, pero todo lo que obtengo es código html sin formato. ¿Cómo puedo renderizar ese HTML?

Utilizar-

  

Necesitas decirle a angular para que no se escape.

Para hacer esto, uso un filtro personalizado.

En mi aplicación:

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

Entonces, en la vista:

 

{{ stuff.title}}

Debes seguir los documentos angulares y usar $ sce – $ sce es un servicio que proporciona servicios de escape de contexto estricto a AngularJS. Aquí hay un documento: http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe

Tomemos un ejemplo con la carga asincrónica del botón de inicio de sesión de Eventbrite

En tu controlador:

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

En su vista solo agregue:

  

En tus servicios:

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

Así que tal vez quiera tener esto en su index.html para cargar la biblioteca, secuencia de comandos e inicializar la aplicación con una vista:

   

Entonces tuView.html podría ser:

 

{{ stuff.h1 }}

{{ stuff.content }}

scripts.js podría tener su controlador con datos $ alcanzados.

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

Por último, tendrá que configurar las rutas y asignar el controlador para ver su $ scope (es decir, su objeto de datos)

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

No he probado esto, lo siento si hay un error, pero creo que esta es la manera Angular de obtener datos

En angular 4+ podemos usar la propiedad innerHTML lugar de ng-bind-html .

En mi caso, está funcionando y estoy usando angular 5 .

 

Archivo In.ts

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