3 votes

Ajouter des styles aux données retournées par la fonction

Je tente d'ajouter des styles CSS à une chaîne calculée en JavaScript. Elle passe par une série de fonctions de transformation :

var fieldSetTransformation = setFieldTransformation(iteration);
fieldSetTransformation = stylePropertyName(fieldSetTransformation);

Cette valeur est ensuite passée à un tableau généré dans une directive à travers ng-repeat d'AngularJS :

        {{line[column.key] !== undefined ? line[column.key] : '--'}}

Je lutte donc pour l'ajouter à un conteneur existant.

Qu'est-ce que j'ai essayé jusqu'à présent ?

Injecter directement du HTML dans la valeur retournée :

var htmledField = [
  '' + fieldSetTransformation,
  ''].join("\n");
];

Aucune utilité, car cela ne semble plus être accepté par les navigateurs actuels (corrigez-moi si je me trompe) car c'est un problème de sécurité.

Le résultat obtenu est simplement 000000 qui apparaît dans le tableau.

Créer l'élément, puis l'ajouter dans la vue

Aussi un échec :

function stylePropertyName(data){
  var newSpan = document.createElement('span');
  newSpan.setAttribute('class', 'propertyNameHighlight');
  document.getElementsByClassName("tableBody").appendChild(newSpan);
  newSpan.innerHTML = data;
  return data;
}

Cela retourne une exception de fonction nulle.

J'ai également vérifié cette question, qui semblait la plus proche de ma requête, mais dans mon cas il n'y a pas de conteneur clair pour envelopper la chaîne résultante.

TL;DR : Ce que j'essaie de réaliser ?

Ce texte vert ici :

description de l'image

Cela représente une cellule. Les données ne sont pas transmises directement, elles sont générées dynamiquement à travers une série de fonctions et de ng-repeats.

Toute aide ou question connexe que je pourrais obtenir est grandement appréciée. Merci !

1voto

wickedchild Points 136

Comme suggéré par le commentaire de Stanislav Kvitash (merci !), j'ai résolu ce problème en utilisant ngBindHtml :

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X