Tengo una aplicación web que utiliza mensajes de Twitter, por ejemplo.

Una fuente de JSON se utiliza para crear una lista de mensajes, pero personajes como 🙏👍👊 se muestran como signos de interrogación en un diamante. El elemento se parece a esto:

<div class="inner-message" ng-bind-html="unit.caption_text | linky:'_blank'"></div>           

Cuando veo las JSON url en Firefox y Chrome, estos muestran excelentes.

Muestra de la cabeza:

<!DOCTYPE html>
<html class="wf-opensans-n4-active wf-active" lang="en">
<head>
<meta charset="utf-8">

Una cosa que me he encontrado durante la depuración: cuando los mensajes son todos en una matriz de objetos, pero no forma parte de $scope, me puede agregar a la página y el emoji muestran correctamente.

Así que creo que algo pasa en Angular para ello. He intentado cambiar ng-bind-html ng-bind, pero que no lo hace. He intentado eliminar ng-bind-html y el uso de {{unidad.caption_text}} en el interior del elemento, pero aún así se rompe con los caracteres unicode.

Por el momento, tengo que ser capaz de utilizar el linky filtro para mostrar los enlaces correctamente, por lo ng-bind-html es necesario, pero no creo que sea el problema.

Es algo que les sucede en javascript para romper la codificación?

Hay una manera de mostrarlos correctamente?


Actualización

Esta muestra iconos como se desee, pero «linky» no agregar formato a los enlaces.

<div class="inner-message">{{unit.text}}</div>

Emoji y otros caracteres unicode que no aparecen correctamente en Angular

Esta muestra roto personajes

<div class="inner-message" ng-bind-html="unit.text | linky:'_blank'"></div>

Emoji y otros caracteres unicode que no aparecen correctamente en Angular


Actualización 2

Llegó allí en el final, haciendo los cambios como se detalla en la Solicitud de Extracción, que Michael vinculados, para detener a los personajes de obtener desordenado.

Yo también encontró que ayuda a dar consistencia si he añadido Symbola a la fuente de la pila para estos mensajes. Usted puede descargar Symbola de esta página por George Douros . Corrí a través de un .ttf a .woff converter para obtener un poco mejor soporte de navegador, que ofrece dos alternativas.

InformationsquelleAutor daveyfaherty | 2014-04-10

2 Comentarios

  1. 7

    Nota: Este post no tiene la intención de mostrar como en Chrome, ya que no admite caracteres Emoji

    Parece Angular del $sanitize servicio de intentos para convertir los caracteres a su HTML entidad equivalente. Sin embargo, para determinados caracteres emoji, se divide en 2. Como se puede ver en http://plnkr.co/edit/fDDen3bnnrQUvx3JfKgw?p=preview,

    $scope.sanitizedText = $sanitize('🙈');

    de salida en la plantilla como

    {{sanitizedText}}

    muestra &#55357;&#56904;. Por qué? No sé.

    Esto significa que cualquier cosa usando $sanitize efectivamente romper con dichos caracteres. Esto incluye

    • Se muestra el resultado de usar ng-bind-html que no ha pasado a través de $sce.trustAsHtml
    • Nada pasa a través de linky, como puede verse en la linky fuente, llama $sanitize.

    Así, puede evitar HTML ir a través de $sanitize mientras

    • De pasar la cadena a través de $sce.trustAsHtml
    • No pasar a través de los Angulares siempre linky filtro, pero el rollo de su propio que no $sanitize la entrada.

    Un ejemplo de filtro es el siguiente:

    app.filter('unsafeLinky', function($sce) {
      //Regex from https://github.com/angular/angular.js/blob/master/src/ngSanitize/filter/linky.js#L5
      var urlRegex = /(((ftp|https?):\/\/|(mailto:)?[A-Za-z0-9._%+-][email protected])\S*[^\s.;,(){}<>])/gi;
      return function(input, target) {
        var targetHTML = target ? ' target="' + target + '"' : '';
        return $sce.trustAsHtml(input.replace(urlRegex,'<a href="$1"' + targetHTML + '>$1</a>'));
      }
    });

    Que puede ser utilizado como

    <p ng-bind-html="text | unsafeLinky:'_blank'"></p>

    Usted puede ver una demostración de esto en http://plnkr.co/edit/sRJmt4YVO8udJInCd4Cy?p=preview

    Como sugiere el nombre, este unsafeLinky filtro no es seguro. Asegúrese de confianza donde el texto original viene.

    Como se sugiere en el inicio de esta respuesta, Chrome no muestra caracteres Emoji correctamente. Para obtener los personajes que muestran en Chrome, usted podría tener que utilizar algún tipo de imagen de sustitución. En cualquier caso, sospecho que está más allá del alcance de esta pregunta en particular.

    Actualización

    Hay PR Angular que podría solucionar este problema, haciendo que el anterior trabajo de todo innecesario una vez que se fusionaron en: https://github.com/angular/angular.js/pull/6911

    • Al parecer $sanitize está roto. Esas referencias decodificar a puntos de codificación de reserva para el «par suplente» mecanismo de UTF-16; alguien iterando sobre el código UTF-16 unidades en lugar de puntos de codificación real, rompiendo todo fuera de la BMP. Camino para ir a la biblioteca de autor.
    • Alex, me encontré con que la noche anterior y funciona. Su respuesta es correcta! También he descargado de una fuente cara para dar manejo coherente de los emojis, y añadió que también. Va a hacer referencia a ella en mi pregunta.
  2. 1

    He encontrado que la expresión regular anterior estaba rompiendo en algunas direcciones url como bit.yl shortlinks así que he adaptado otro ejemplo que he encontrado en algún lugar:

    twitterApp.filter('parseUrl', function($sce) {
        var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\[email protected]?^=%&amp;\/~+#-])?/gi;
        return function(text) {        
            angular.forEach(text.match(urlPattern), function(url) {
                text = text.replace(url, "<a target=\"_blank\" href="+ url + ">" + url +"</a>");
            });
            return $sce.trustAsHtml(text);        
        };
    });

    Uso:

    <p ng-bind-html="tweet.text | parseUrl"></p>

Dejar respuesta

Please enter your comment!
Please enter your name here