не выходит вставить хтмл строку с скоупа в хтмл, чтобы теги срабатывали

330

27 января 2017, 08:05

Не вышло сформировать четко и внятно суть проблемы, наверное по этому я в гугле и не смог найти более менее похожий вопрос, к сожалению. Есть приложение на ангуляре, в скоуп я получаю ответ с сервера - уже отформатированный шаблон хтмл, который соответственно получен (и храниться) как строка. Пробовал по простому - просто выполнить в хтмл {{скоуп}}, но он вставляет его как строку и теги в том числе. Пробовал еще 1 вариант с angular-sanitize, который вроде должен переобразовать в текст с обработкой тегов, но тоже без результатно..

app.controller('Controller', function($scope) {
  $scope.text = "<!doctype html><html lang='en'><head><meta charset='UTF-8'><title>Document</title></head><body><h1>Hello world</h1></body></html>"
})

Пример в plunkr

Answer 1

В данном случае можно воспользоваться директивой ng-bind-html и сервисом $sce

var app = angular.module('App', []); 
 
app.controller('Controller', function($scope, $sce) { 
  $scope.text = $sce.trustAsHtml("<h1>Hello world</h1>"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
<span ng-app="App" ng-controller="Controller" data-ng-bind-html="text"></span>

Либо модулем ngSanitize

var app = angular.module('App', ['ngSanitize']); 
 
app.controller('Controller', function($scope) { 
  $scope.text = "<h1>Hello world</h1>"; 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.js"></script> 
<span ng-app="App" ng-controller="Controller" data-ng-bind-html="text"></span>