在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将在插值指令处理时显示为元素中的textcontent.