Как я могу получить свой обработанный html как html вместо обычного текста?

Это jsFiddle объясняет всеКак я могу получить свой обработанный html как html вместо обычного текста?

Мой код отделяет хештегов, например, #riots = <span class="hashtags">#riots</span>, но он печатается в виде открытого текста, а не HTML. Что я делаю не так?

function formCtrl($scope){ 
 
    $scope.$watch(function() { 
 
     $scope.description = "Wow, it's crazy over here! #baltimore #riots"; 
 
     $scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig); 
 
     $scope.desc = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hashtag'>$2</span>"); 
 
    }) 
 
}

#description { 
 
    width: 300px; 
 
    height: 3em; 
 
} 
 
.hashtag { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app ng-controller="formCtrl"> 
 
    <textarea ng-model="description" id="description"></textarea> 
 
    <br /> 
 
vidTags: {{vidTags}} 
 
    <br /> 
 
desc: {{desc}} 
 
    <br /> 
 

 
</div>

источник

2015-04-30 Jay

Может быть обманутым? http://stackoverflow.com/questions/14761724/angularjs-insert-html-from-a-string – RenaissanceProgrammer

читать $ sce и $ santize https://docs.angularjs.org/api/ng/service/$sce –

Спасибо для вашего комментария @RenaissanceProgrammer. Ответ не помог, но первый комментарий ниже этого сделал! Пока я просто хочу, чтобы он работал. Позже я попытаюсь получить $ sce или $ sanatize для работы – Jay

Вот Plunker что показывает рабочий пример с использованием $sce.

http://plnkr.co/edit/sZliFJjOTiRyFxe7Bdts?p=preview

<html> 

<head> 
    <script data-require="[email protected]*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 

    <script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-app="myApp"> 
    <div ng-controller="formCtrl"> 
    <textarea ng-model="description" id="description"></textarea> 
    <br />vidTags: {{vidTags}} 
    <br /><div ng-bind-html="desc"></div> 
    <br /> 
    </div> 
    <script> 
    var app = angular.module('myApp', []); 
    app.controller('formCtrl', function formCtrl($scope, $sce) { 

     $scope.$watch(function() { 
     $scope.description = "Wow, it's crazy over here! #baltimore #riots"; 
     $scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig); 
     var message = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, '$1<span class="hashtag">$2</span>'); 
     $scope.desc = $sce.trustAsHtml(message); 
     }) 
    }) 
    </script> 
</body> 

</html>

источник

2015-04-30 23:44:41 jake

спасибо, Джейк! Это сделал трюк! – Jay

@jake, где возможно, попробуйте включить код ответа в свой ответ вместо сторонних мест, таким образом, если ваш код будет удален из plnkr в последующие годы, пользователи переполнения стека все равно получат выгоду от вашего ответа. –

@Iconiq - Хорошая точка. Я обновил свой пост. – jake

Теперь вы должны использовать $ SCE для запуска вывода через фильтр, который вы можете указать, чтобы позволить HTML.

Мы можем реализовать это с помощью $ sce.trustAsHtml(), добавив фильтр в код [the] (вне контроллера). Этот пользовательский фильтр сделает уверен, что [] HTML не будут отфильтрованы AngularJS 1,2/AngularJS 1,3 или более поздней версии

Источники:

http://creative-punch.net/2014/04/preserve-html-text-output-angularjs/ https://docs.angularjs.org/api/ng/service/$sce

источник

2015-04-30 23:31:08

Как я могу получить свой обработанный html как html вместо обычного текста?

ответ

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