Декодировать HTML-объект в Angular JS
Как декодировать объект HTML в тексте с помощью angular JS.
У меня есть строка
""12.10 On-Going Submission of ""Made Up"" Samples.""
Мне нужен способ декодирования с помощью angular JS. Я нашел способ сделать это с помощью javascript здесь, но я уверен, что он не будет работать для Angular. Нужно вернуть исходную строку в пользовательском интерфейсе, которая будет выглядеть как
""12.10 On-Going Submission of ""Made Up"" Samples.""
Ответы
Ответ 1
Вы можете использовать директиву 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>
Ответ 2
Если вы не хотите использовать ngSanitize, вы можете сделать это следующим образом:
в вашем контроллере:
$scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."'
$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 в свой контроллер
Ответ 3
У меня есть аналогичная проблема, но не нужно использовать значение результата в пользовательском интерфейсе. Эта проблема была решена с помощью кода из модуля angular 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,"<");
// innerText depends on styling as it doesn't display hidden elements.
// Therefore, it better to use textContent not to cause unnecessary reflows.
return hiddenPre.textContent;
}
var encoded = '<p>name</p><p><span style="font-size:xx-small;">ajde</span></p><p><em>da</em></p>';
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>