Afficher du html avec Angular V 1.2.6

Version imprimable

27/11/2014, 19h05
bipbip2006

Afficher du html avec Angular V 1.2.6
Bonjour à tous,
Pour une évolution d'un projet en java, je dois modifier un affichage réalisé en Angular
Pas de souci pour ajouter une colonne. Cependant, je bute pour interpréter du html.
Dans un champ de base de données, j'ai plusieurs informations tel que :
mail : monmail@monmail.com; Nom du fichier : monfichier.txt; mon code : 400; etc
Je souhaite aller à la ligne après chaque ;
Via une bouche for, je modifie donc sur chaque item ; en <br>, pas de souci à ce niveau la.
Par contre, lors de l'affichage avec Angular, <br> n'est pas interpréter mais affiché.
J'ai vu que sous angular v <1.2, il y avait un paramètre "unsafe html", mais cela ne semble pas être le souci.
D'après mes tests si je fais
Code:

1 2 3 {field: 'atAdditionalInformations', displayName: 'Actions', cellTemplate: '<div class="grid-action-cell">'+ '{{row.getProperty(col.field)}}</div>'}
Mon code issu de la base de données n'est pas interprété.
Par contre si je fais :
Code:

1 2 3 {field: 'atAdditionalInformations', displayName: 'Actions', cellTemplate: '<div class="grid-action-cell">'+ 'tata<br>titi;toto</div>'}
Pas de souci, les sauts de lignes sont biens interprétés au niveau du navigateur.
Je pense donc que le souci vient du {{row.getProperty(col.field)}} pour qui le html est protéger.
Existe t'il un paramètre pour interpréter ce html ?
En vous remerciant par avance.
Cordialement
27/11/2014, 19h55
kaari kosaku

Salut,

Le html-bind-unsafe c'est pour que html-bind contienne aussi les balises "interdites", genre <script>.

Ton problème c'est que {{}} se retrouve dans ta page html après la phase de compile d'angular.

De plus ton post devrait se trouver dans la section adaptée : bibliothèques et framework.
27/11/2014, 20h09
bipbip2006

Bonjour et merci pour ce début de réponse.
Comme je n'ai pas vu de forum angular, j'ai posté ici sans faire attention.
Existe t-il une solution pour éviter les {{}} et que les <br> soient bien interpréter ?
Je débute en Angular et j'avoue être un peu dérouté par ce framework !
27/11/2014, 21h27
kaari kosaku

En fait, lorsque tu vas charger la lib angular, angular va parcourir tout ton html avant de l'interpréter en tant que template angular (c'est la phase de $compile). Ensuite angular va lier le $scope et le template ensemble (c'est la phase de link).

Lorsque tu affiche du code html via html-blind, la phase de $compile de ton application angular est déja passée, donc tout ce qui tu mettra dans ton code html qui nécessitera un $compile (exemple une directive custom), ne fonctionnera pas.
{{}} ne veut rien dire en html, il faut alors que tu indique à angular de repasser par ici pour "recompiler" cette partie.

Ceci devrait te permettre d'y arriver :

http://stackoverflow.com/questions/1...tive-within-it
http://jesusjzp.github.io/blog/2014/...ind-angularjs/

Bonjour et merci pour votre retour mais cela ne semble pas fonctionner.
J'ai également fait des recherches de mon coté et je n'arrive pas à comprendre l'impact d'une directive sur le module Angular.
J'ai ajouté le code ci dessous après le module :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.directive('compile', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
          var ensureCompileRunsOnce = scope.$watch(
            function(scope) {
               // watch the 'compile' expression for changes
              return scope.$eval(attrs.compile);
            },
            function(value) {
              // when the 'compile' expression changes
              // assign it into the current DOM
              element.html(value);
 
              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
 
              // Use un-watch feature to ensure compilation happens only once.
              ensureCompileRunsOnce();
            }
        );
    };
}]);

Visiblement il n'y a pas de recompilation du coté angular, et les <br> ne sont toujours pas interpréter (et toujours affichés)...
Pour information, les colonnes sont définies tel que :

Code:

1
2
3
4
5
 
$scope.column=[
	 {field: 'atAdditionalInformations', displayName: 'Actions', cellTemplate: 
		 '<div class="grid-action-cell" ng-bind-html-unsafe="row.getProperty(\'atAdditionalInformations\')">'+
		 '{{row.getProperty(col.field)}}</div>'}];

Cela me parait bien compliquer pour afficher de l'html avec Angular, et tous les tutoriels que j'ai pu voir ont l'air plus simple. Le code du dessus est issu de de plunker en partie (http://plnkr.co/edit/6Wn4FOsDALgqX6WvCFT6?p=preview).