angularjs newline filter sans autre code HTML

Question

Je suis en train de convertir les caractères de saut de ligne (\n) html br'.
Conformément à cette discussion dans le Groupe Google, voici ce que j'ai obtenu:

myApp.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
});

La discussion il conseille également d'utiliser les éléments suivants dans la vue:

{{ dataFromModel | newline | html }}

Cela semble être l'aide de l'ancien html filtre, alors que maintenant, nous sommes censés utiliser le ng-bind-html d'attribut.

---

Peu importe, ce qui pose un problème: je ne veux pas de HTML à partir de la chaîne d'origine (dataFromModel) à être rendu au format HTML; seulement l' br'.

Par exemple, pour la chaîne suivante:

Alors que 7 > 5
Je ne veux pas html & trucs ici...

Je veux à la sortie:

While 7 &gt; 5<br>I still don't want html &amp; stuff in here...

Est-il un moyen pour accomplir cette?

Answer 1

Peut-être que vous pouvez y parvenir qu’avec html, un `` moyen ? Il va éviter d’utiliser des filtres ou faire n’importe quel genre de traitement.

Tout ce que vous avez à faire est d’afficher le texte dans un élément qui possède ce CSS :

Cela analyser et afficher \n sous forme de nouvelles lignes. Fonctionne très bien pour moi.

Ici, un exemple de jsFiddle.

Answer 2

Au lieu de jouer avec les nouvelles directives, j'ai décidé d'utiliser 2 filtres:

 App.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
})
.filter('noHTML', function () {
    return function(text) {
        return text
                .replace(/&/g, '&amp;')
                .replace(/>/g, '&gt;')
                .replace(/</g, '&lt;');
    }
});
 

Puis, à mon avis, j'en ai un dans l'autre:

 <span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>
 

Answer 3

Une méthode plus simple consiste à créer un filtre qui divise le texte à chaque \n en une liste, puis à utiliser `ng-repeat.

Le filtre:

 App.filter('newlines', function() {
  return function(text) {
    return text.split(/\n/g);
  };
});
 

et dans le html:

 <span ng-repeat="line in (text | newlines) track by $index"
    <p> {{line}}</p>
    <br>
</span>
 

Answer 4

Je ne suis pas au courant si Angulaire dispose d'un service de bande de html, mais il semble que vous devez supprimer le html avant de passer votre newlines filtre personnalisé. La façon dont je voudrais faire c'est grâce à une coutume no-html directive, qui serait passé d'une portée bien et le nom d'un filtre à appliquer après le retrait de l' html

<div no-html="data" post-filter="newlines"></div>

Voici la mise en œuvre

app.directive('noHtml', function($filter){
  return function(scope, element, attrs){
    var html = scope[attrs.noHtml];
    var text = angular.element("<div>").html(html).text();

    // post filter
    var filter = attrs.postFilter;
    var result = $filter(filter)(text);

    // apending html
    element.html(result);
  };
});

L'important est l' text variable. Ici, j'ai créer un intermédiaire de l'élément DOM et ajouter le code HTML à l'aide de l' html méthode, puis récupérer uniquement le texte avec l' text méthode. Les deux méthodes sont fournis par Angulaire de la lite, la version de jQuery.

La partie suivante est l'application de la newline filtre, ce qui se fait à l'aide de l' $filter de service.

De vérifier la plunker ici: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview