Question

我一直在搜索几个小时，而且在使用ng-repeat检索时，我似乎无法找到解析HTML代码的方法。我检查了$ sce.trustAsHtml但我不知道如何在我的代码中应用它。

html文件：

<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <h2>My Links</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <td>Name</td>
                <td>URL</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="stuff in myStuff()">
                <td>{{stuff.name}}</td>
                <td>{{stuff.url}}</td>
            </tr>
        </tbody>
    </table>
</div>

的javascript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope) {
$scope.myStuff = function() {
    return [
        {
            'name':'Google',
            'url':'<a href="http://google.com">Google</a>'
        },
        {
            'name':'Yahoo',
            'url':'<a href="http://yahoo.com">Yahoo</a>'
        },
        {
            'name':'Microsoft',
            'url':'<a href="http://microsoft.com">Microsoft</a>'
        }
    ];
};
});

它正在显示HTML源代码，但我希望它能够编译代码。我的JS方法有问题吗？一旦我弄明白，我将使用$ http指令将它应用于json文件。任何人都能解释一下吗？我的代码位于http://jsfiddle.net/s2ykvy8n/

感谢。

Answer 1

包含ng-sanitize脚本，并在您的模块中添加依赖项。

 var myApp = angular.module('myApp', ['ngSanitize']);

并使用ng-bind-html

     <td ng-bind-html="stuff.url"></td>

你很高兴： -

<强> Plnkr

通过插值指令处理，绑定中的html将在元素中显示为textcontent。

Answer 2

我的第一个倾向（从你的例子开始，你只是返回链接）是建议你从你返回的json中删除html，然后将url作为字符串返回。

格式：

{
    'name': 'Google',
    'url': 'http://google.com'
}

然后您的HTML看起来像这样，

<tbody>
    <tr ng-repeat="stuff in myStuff()">
        <td>{{stuff.name}}</td>
        <td><a href="{{stuff.url}}">{{stuff.name}}</a></td>
    </tr>
</tbody>

但是，如果你必须在你的json文件中有HTML字符串，我会看看$compile。底部的示例可以帮助您创建指令以将“url”字符串编译为HTML

在ng-repeat中解析html

2 个答案: