将包含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 上，我发现由于安全问题，jade 不允许在此处直接使用 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 调试器中没有显示错误，并在检查元素中显示 -

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

有什么建议我可能会出错吗？？

Answer 1

你很困惑。一方面，jade模板在服务器上编译，angular模板在客户端编译。所以当然post.message 没有在服务器上定义，因为您是在客户端代码中定义它。

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

您的模板应如下所示：

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

而且你的 obj.message 应该包含 标签而不是转义序列。

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