javascript - 将包含html的动态变量从angularjs加载到jade模板

Question

我有一个 Controller ，它使用 $http 获取一些数据，然后将其存储在数组 $scope.feeds 中。现在我的 Jade 语法是 -

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}}

现在，在谷歌上我发现由于安全问题，jade 不允许在这里直接使用 html，所以建议使用类似 -

p!= {{post.message}}

或

p.
   #{post.message}

但是我收到了 jade 错误，说 post.message 未定义。附:我可以看到类似 - ass<b>sada</b> 的字符串通过显示 {{post.message}} 所以 post.message 不是未定义的。那么，谁能告诉我如何将 html 内容添加到该段落标记中。请注意，我的 Controller 代码示例如下 -

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);
});

我还尝试将其添加到 Controller 代码中 -

$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);
    }

Jade 部分更新为 -

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，而不是jade。对于大多数 html 来说都是如此，但它确实允许您绑定(bind)有限数量的标签，而无需“信任”html。您只需要使用 ngBindHtml。

您的模板应如下所示:

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

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

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