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 - 我拿到的只是文字：

<img src="http://192.168.169.1:8182/ChatGUINoSQL/messages/img_smile.png"/>

看起來像在UI正確的代碼，但是這僅僅是一個文本（因爲它改變<和>符號代碼）。

我應該怎麼做才能看到圖像而不是這個URL文本？ 謝謝！

修復

地址：

<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

添加ngSanitizecdn到您的應用程序。

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> 

讓我們知道，如果它仍然造成問題。