将包含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是未定义的。 附注：通过显示{{post.message}}，我可以看到ass<b>sada</b>的字符串，因此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))}}")

在chrome调试器中没有显示任何错误，并在inspect元素中显示了此错误-

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

任何建议，我可能会出问题？

Answer 1

你很困惑 首先，玉器模板在服务器上编译，而角度模板在客户端上编译。 因此，当然在服务器上未定义post.message ，因为您是在客户端代码中定义的。

其次，您可能指的是不支持html的angular而不是jade。 对于大多数html来说都是如此，但是它确实允许您绑定有限数量的标签而无需“信任” html。 您只需要使用ngBindHtml。

您的模板应如下所示：

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

并且您的obj.message应该包含<和>标记，而不是转义的序列。

您可以在此处阅读有关$ sce以及如何将angular绑定到html的信息https://docs.angularjs.org/api/ng/service/ $ sce