在 ng-repeat 中解析 html

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 在被插值指令处理时将显示为元素中的文本内容。

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