Загрузка динамической переменной, содержащей html из шаблона angularjs в jade

Question

У меня есть контроллер, который с помощью $ http извлекает некоторые данные, а затем сохраняет его в массиве $ scope.feeds. Теперь мой синтаксис нефрита -

div(ng-repeat="post in feeds") 
     div.box.box-success 
      div.box-header 
       h3.box-title 
        i.fa.fa-user 
        | {{post.firstName}} {{post.lastName}} 
       div.pull-right 
        i.fa.fa-clock-o 
        //| {{(new Date(post.date)).toTimeString().split(":")[0]}} {{(new Date(post.date)).toTimeString().split(":")[1]}}, {{(new Date(post.date)).toDateString()}} 
      div.box-body 
       p. 
        {{post.message}} 

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

p!= {{post.message}} 

или

p. 
    #{post.message} 

, но я получаю ошибку нефрита, говоря, что post.message не определен. Постскриптум Я могу видеть строку типа - ass<b>sada</b>, отображая {{post.message}}, поэтому post.message не определен. Итак, может ли кто-нибудь сказать мне, как добавить html-содержимое в этот абзац абзаца. Пожалуйста, обратите внимание, что образец моего кода контроллера, как это -

angular.module('student').controller('StudentDashBoardController', function($rootScope, $scope,$http,$location,mvNotifier) { 
    $scope.feeds = []; 
    var obj = { "message" : "asdsd<b>asd</b>","firstName":"test","lastName":"test" ,"username" : "test@test.com", "dislikes" : [ ], "likes" : [ ], "tags" : [ ], "comments" : [ ], "views" : 1, "date" : "2014-12-18T19:08:44Z", "__v" : 0 }; 
    $scope.feeds.push(obj); 
}); 

Я также попытался добавить это в коде контроллера -

$scope.decode = function(textData){ 
     var textarea=document.createElement("textarea"); 
     textarea.innerHTML = textData; 
     return textarea.textContent; 
    }; 
$scope.to_trusted = function(html_code) { 
     return $sce.trustAsHtml(html_code); 
    } 

и нефритовая часть обновлена ​​-

p(ng-bind-html="{{to_trusted(decode(post.message))}}") 

, который не обнаруживает ошибки в отладчике хрома и показывает это в контрольном элементе -

<p ng-bind-html="asdsd<b>asd</b>"></p> 

любые предложения, в которых я могу ошибиться?

Answer 1

Вы в замешательстве. Например, jade-шаблоны скомпилированы на сервере, а на клиенте скомпилированы угловые шаблоны. Итак, конечно, post.message не определен на сервере, потому что вы определяете его в своем клиентском коде.

Во-вторых, вы можете иметь в виду угловой не разрешая html, а не нефрит. Это справедливо для большинства html, но это позволяет вам связывать ограниченное количество тегов без «доверия» html. Вам просто нужно использовать ngBindHtml.

Ваш шаблон должен выглядеть следующим образом:

p(ng-bind-html="post.message") 

И ваш obj.message должен содержать < и> тег, а не ускользнули последовательность.

Вы можете прочитать о $ SCE и как связать угловатую HTML здесь https://docs.angularjs.org/api/ng/service/ $ SCE