2014-09-26 4 views
23

Как декодировать объект HTML в тексте с использованием углового JS.Декодировать объект HTML в Angular JS

У меня есть строка

""12.10 On-Going Submission of ""Made Up"" Samples."" 

Мне нужен способ, чтобы расшифровать это, используя угловую JS. Я нашел способ сделать это с помощью javascript here, но я уверен, что он не будет работать для Angular. Нужно вернуть исходную строку на интерфейсе, который будет выглядеть

""12.10 On-Going Submission of ""Made Up"" Samples."" 

ответ

41

Вы можете использовать директиву о ng-bind-html, чтобы отобразить его в качестве содержимого HTML со всеми HTML сущности декодированию. Просто включите в приложение приложение ngSanitize.

DEMO

JAVASCRIPT

angular.module('app', ['ngSanitize']) 

    .controller('Ctrl', function($scope) { 
    $scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."'; 
    }); 

HTML

<body ng-controller="Ctrl"> 
    <div ng-bind-html="html"></div> 
    </body> 
+14

но если вы не обыкновение оказанного это как HTML, как вы можете иметь дело с этим? –

22

Если вы не хотите использовать ngSanitize, вы можете сделать это следующим образом:

в контроллере:

$scope.html = '&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;' 
$scope.renderHTML = function(html_code) 
     { 
      var decoded = angular.element('<textarea />').html(html_code).text(); 
      return $sce.trustAsHtml(decoded); 
     }; 

И в шаблоне:

<div ng-bind-html="renderHTML(html)"></div> 

Просто убедитесь, что вы впрыснуть $ SCE в контроллере

+0

Это работает, но я получаю эту ошибку в консоли: 'angular.min.js: 123 TypeError: angular.element (...). Html (...). Текст не является функцией at b. $ scope.renderHTML (app.js: 24) at fn (eval at compile (angular.min.js: 239), : 4: 284) at angular.min.js: 129 at m. $ digest (угловой .min.js: 146) at m. $ apply (angular.min.js: 149) at angular.min.js: 21 at Object.invoke (angular.min.js: 44) at c (угловой .min.js: 21) в Sc (angular.min.js: 22) at ue (angular.min.js: 20) ' – Flash

1

У меня аналогичная проблема, но не нужно использовать значение результата в пользовательском интерфейсе. Эта проблема была решена с помощью кода из углового модуля ngSanitize:

var hiddenPre=document.createElement("pre"); 
 
/** 
 
* decodes all entities into regular string 
 
* @param value 
 
* @returns {string} A string with decoded entities. 
 
*/ 
 
function decodeEntities(value) { 
 
    if (!value) { return ''; } 
 
    
 
    hiddenPre.innerHTML = value.replace(/</g,"&lt;"); 
 
    // innerText depends on styling as it doesn't display hidden elements. 
 
    // Therefore, it's better to use textContent not to cause unnecessary reflows. 
 
    return hiddenPre.textContent; 
 
} 
 

 

 
var encoded = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;'; 
 
var decoded = decodeEntities(encoded); 
 

 
document.getElementById("encoded").innerText=encoded; 
 
document.getElementById("decoded").innerText=decoded;
#encoded { 
 
    color: green; 
 
} 
 

 
#decoded { 
 
    color: red; 
 
}
Encoded: <br/> 
 
<div id="encoded"> 
 
</div> 
 

 
<br/> 
 
<br/> 
 

 
Decoded: <br/> 
 
<div id="decoded"> 
 
</div>

Смежные вопросы