Comprendre profondément la directive NG-Bind-HTML et le service $ SCE dans AngularJS

Préface

L'une des puissances d'AngularJS est sa puissante caractéristique de liaison bidirectionnelle des données. Deux choses que nous utilisons souvent sont Ng-Bind et Ng-Model pour la forme.

Mais dans notre projet, nous rencontrerons cette situation, les données renvoyées en arrière-plan contient diverses balises HTML.

comme:

 $ scope.currentwork.description = "Bonjour, <br> <b> Où allons-nous aujourd'hui? </b>"

Nous utilisons des instructions comme NG-Bind-HTML pour se lier, mais le résultat n'est pas ce que nous voulons.

C'est ça

 Bonjour, où allons-nous aujourd'hui?

Ce qu'il faut faire?

Pour la version angulaire 1.2, nous devons utiliser le service $ SCE pour résoudre notre problème. Le soi-disant SCE est l'abréviation de "échappement contextuel strict". Traduit en chinois est un "mode de contexte strict" et peut également être compris comme une liaison sûre.

Voyons comment l'utiliser.

Code du contrôleur:

 $ http.get ('/ api / work / get? workid =' + $ routeParams.workid) .success (function (work) {$ scope.currentwork = work;});

Code html:

 <p> {{currentwork.description}} </p>

Le contenu que nous retournons contient une série de balises HTML. Les résultats sont présentés comme nous l'avons dit au début de l'article. Pour le moment, nous devons lui dire de se lier en toute sécurité. Cela peut être fait en utilisant $ sce.trustAsHtml() . Cette méthode convertit la valeur en acceptation privilégiée et utilise "ng-bind-html" en toute sécurité. Nous devons donc introduire un service $ SCE dans notre contrôleur

 contrôleur ('transfertworkStep2', ['$ scope', '$ http', '$ routeParams', '$ sce', fonction ($ scope, $ http, $ routeParams, $ sce) {$ http.get ('/ api / work / get? workid =' + $ routeparams.workid). travail;

Code html:

 <p ng-bind-html = "currentwork.description"> </p>

Ce résultat est parfaitement présenté sur la page:

 Bonjour où allons-nous aujourd'hui?

Nous pouvons également l'utiliser comme celui-ci, le résumer dans un filtre et l'appeler sur le modèle à tout moment.

 app.filter ('to_trusted', ['$ sce', fonction ($ sce) {return function (text) {return $ sce.trustashtml (text);};}]);

Code html:

 <p ng-bind-html = "currentwork.description | to_trusted"> </p>

Résumer

Ce qui précède concerne la directive NG-Bind-HTML et le service $ SCE dans AngularJS. J'espère que cela vous aidera à étudier ou à travailler. Si vous avez des questions, vous pouvez laisser un message pour communiquer.