Prefacio
Uno de los poder de AngularJS es su potente característica de enlace bidireccional de datos. Dos cosas que a menudo usamos son Ng-Bind y Ng-Model para la forma.
Pero en nuestro proyecto, encontraremos esta situación, los datos devueltos en segundo plano contienen varias etiquetas HTML.
como:
$ scope.currentwork.description = "Hola, <br> <b> ¿A dónde vamos hoy? </b>"
Utilizamos instrucciones como NG-Bind-HTML para unir, pero el resultado no es lo que queremos.
Eso es todo
Hola, ¿a dónde vamos hoy?
¿Qué hacer?
Para la versión Angular 1.2, debemos usar el servicio $ SCE para resolver nuestro problema. El llamado SCE es la abreviatura de "escaparte del contextual estricto". Traducido al chino es el "modo de contexto estricto" y también puede entenderse como una vinculación segura.
Veamos cómo usarlo.
Código del controlador:
$ http.get ('/api/work/get? workid =' + $ ruteParams.workId) .success (function (work) {$ scope.currentwork = work;});Código HTML:
<p> {{currentwork.description}} </p> El contenido que devolvemos contiene una serie de etiquetas HTML. Los resultados se muestran como dijimos al comienzo del artículo. En este momento debemos decirle que se una de manera segura. Se puede hacer usando $ sce.trustAsHtml() . Este método convierte el valor en aceptación privilegiada y usa "NG-Bind-HTML" de manera segura. Entonces, tenemos que introducir el servicio $ SCE en nuestro controlador
controlador ('transferworkstep2', ['$ scope', '$ http', '$ rutyEparams', '$ sce', function ($ scope, $ http, $ ruteParams, $ sce) {$ http.get ('/api/work/get? trabajo;Código HTML:
<p ng-bind-html = "currentwork.description"> </p>
Este resultado se presenta perfectamente en la página:
Hola, ¿a dónde vamos hoy?
También podemos usarlo así, encapsularlo en un filtro y llamarlo en la plantilla en cualquier momento.
app.filter ('to_trusted', ['$ sce', function ($ sce) {function return (text) {return $ sce.trustashtml (text);};}]);Código HTML:
<p ng-bind-html = "currentwork.description | to_trusted"> </p>
Resumir
Lo anterior se trata de la Directiva NG-Bind-HTML y el servicio $ SCE en AngularJS. Espero que te ayude a estudiar o trabajar. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse.