Prefácio
Um dos poder do AngularJS é o seu poderoso recurso de ligação bidirecional de dados. Duas coisas que costumamos usar são NG-Bind e Ng-modelo para forma.
Mas em nosso projeto, encontraremos essa situação, os dados retornados em segundo plano contêm várias tags HTML.
como:
$ scope.currentwork.description = "Olá, <br> <b> Para onde estamos indo hoje? </b>"
Utilizamos instruções como NG-Bind-HTML para ligar, mas o resultado não é o que queremos.
É isso
Olá, para onde estamos indo hoje?
O que fazer?
Para a versão angular 1.2, devemos usar o serviço $ SCE para resolver nosso problema. A chamada SCE é a abreviação de "rigorosa escapamento contextual". Traduzido para o chinês é "modo de contexto rigoroso" e também pode ser entendido como uma ligação segura.
Vamos ver como usá -lo.
Código do controlador:
$ http.get ('/api/work/get? workId =' + $ routeParams.workid) .success (function (work) {$ scope.currentwork = work;});Código HTML:
<p> {{currentwork.description}} </p> O conteúdo que retornamos contém uma série de tags HTML. Os resultados são mostrados como dissemos no início do artigo. Neste momento, devemos dizer para vincular com segurança. Isso pode ser feito usando $ sce.trustAsHtml() . Este método converte o valor em aceitação privilegiada e usa "ng-bind-html" com segurança. Então, temos que apresentar o serviço $ sce em nosso controlador
controlador ('transferworkstep2', ['$ scope', '$ http', '$ routeparams', '$ sce', função ($ scope, $ http, $ routeParams, $ sce) {$ http.get ('/api/work/get? workid =' $ routeParams.works). trabalho;Código HTML:
<p ng-bind-html = "currentwork.description"> </p>
Este resultado é perfeitamente apresentado na página:
Olá, onde estamos indo hoje?
Também podemos usá -lo assim, encapsulá -lo em um filtro e chamá -lo no modelo a qualquer momento.
app.filter ('to_trusted', ['$ sce', function ($ sce) {return function (text) {return $ sce.trustashtml (text);};}]);Código HTML:
<p ng-bind-html = "currentwork.description | to_trusted"> </p>
Resumir
O exposto acima é sobre a diretiva NG-Bind-HTML e o serviço $ SCE em AngularJS. Espero que isso ajude você a estudar ou trabalhar. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar.