Question

我想用文字而不是:)符号显示图像。我有一个html + angularjs 14.8。包含代码的页面：

<tr ng-repeat="message in messages | filter:searchForMessage" my-directive="message">
    <td align="left" ng-class='{sent :message.id_user_sent == hiddenFriendId, recieved: message.id_user_sent != hiddenFriendId}'>
            {{message.id_user_sent == hiddenFriendId ? "&#x21FD" : "&#x21D2"}} {{emoji(message.message)}}
    </td>

我有一个函数表情符号转换:)到图像：

$scope.emoji = function(text) {
var getUrlToMessages = "http://"+location.hostname+(location.port ? ':'+location.port: '')+"/";
var emoticons = {
        ':)'  : getUrlToMessages +'img_smile.png',
        ':('  : getUrlToMessages +'img_sad.png',
        ':D'  : getUrlToMessages +'img_haha.png',
        ':o'  : getUrlToMessages +'img_omg.png'
      }, patterns = [], metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;
  // build a regex pattern for each defined property
  for (var i in emoticons) {
      if (emoticons.hasOwnProperty(i)){ // escape metacharacters
          patterns.push('('+i.replace(metachars, "\\$&")+')');
      }
  }
  // build the regular expression and replace
  return text.replace(new RegExp(patterns.join('|'),'g'), function (match) {
      return typeof emoticons[match] != 'undefined' ?'<img ng-src="'+emoticons[match]+'"/>' : match;
  });
}

问题是我的UI中没有图像作为输出 - 我只得到一个文本：

＆LT; IMG SRC =＆＃34; HTTP：//192.168.169.1：8182 / ChatGUINoSQL /消息/ img_smile.png＆＃34; /＆GT;

在UI上看起来像是一个正确的标记，但这只是一个文本（导致它将＆lt;和＆gt;符号更改为代码）。

如何查看图片而不是此网址文字？谢谢！

修正

添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.min.js"></script>
<script src="angular-sanitize.min.js"></script>

更新html：

<tr ng-repeat="message in messages | filter:searchForMessage">
    <td align="left" ng-class='{sent :message.id_user_sent == hiddenFriendId, recieved: message.id_user_sent != hiddenFriendId}'>
    {{message.id_user_sent == hiddenFriendId ? "&#x21FD" : "&#x21D2"}} <div ng-bind-html="emoji(message.message)"></div> <!-- {{ message.message }}  -->
    </td>

js更新：

// build the regular expression and replace
  return text.replace(new RegExp(patterns.join('|'), 'g'), function (match) {
    var escape = typeof emoticons[match] != 'undefined' ? '<img src="' + emoticons[match] + '" />' : match;
    return  $sce.trustAsHtml(escape);
  });

Answer 1

将ngSanitize cdn添加到您的应用中。

 angular.module('myApp', ['ngSanitize'])// your app

注入控制器

 myApp.controller('MyCtrl', function($scope,$sce) { // your controller

更新return语句。让我们标记html安全显示。 $sce

return text.replace(new RegExp(patterns.join('|'), 'g'), function (match) {
    var escape = typeof emoticons[match] != 'undefined' ? '<img src="' + emoticons[match] + '" />' : match;
    return  $sce.trustAsHtml(escape);
});

更新html

<div ng-bind-html="emoji(message.message)"></div>

如果它仍然引起问题，请告诉我们。

图像不会通过ng-repeat中的功能显示在我的页面上

1 个答案: