Question

我遇到了一个无法找到解决方案的问题。

所以我正在尝试创建一个应用程序，它将显示从soundcloud中获取的曲目，并使用soundcloud embeded播放器将其显示在我的页面上。我将使用DjangoREST创建我想要显示的所有曲目的JSON列表。 JSON将有一个存储嵌入式HTML的条目，并将打包并发送到AngularJS前端。

我面临的问题是即使在使用ng-bind-html后我也无法显示嵌入的HTML。

我创建了一个小型演示来演示我面临的问题。

app.js

(function(){
    var app = angular.module("tracklist", []);

    app.controller("TrackListController", function () {
        this.tracks = soundcloudtracks;
    });

    // Very basic JSON track coming in from DjangoREST
    var soundcloudtracks = [
        {
            title: 'Track1',
            artist: 'Artist1',
            html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&amp;show_artwork=true&amp;client_id=e72237107739281ffceb867534efd87c"></iframe>',
        },
        {
            title: 'Test2',
            artist: 'Artist2',
            html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&amp;show_artwork=true&amp;client_id=e72237107739281ffceb867534efd87c"></iframe>',
        },
    ]
})();

的index.html

<!DOCTYPE html>
<html ng-app="tracklist">
    <head>
    </head>

    <body>
        <div>
            <div ng-controller="TrackListController as tracklistcont">
                <div ng-repeat="track in tracklistcont.tracks">
                    <h1>{{ track.title }} - {{ track.artist }} </h1>
                    <div ng-bind-html="track.html"></div>            
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

根据我的理解，我需要$sanitize传入的HTML，但我不知道如何正确清理ng-repeat中的每个元素。任何人都可以帮我吗？我现在完全迷失了。

感谢您的时间。

Answer 1

好的，我相信我能够解决这个问题。我刚刚创建了一个方法来清理我的HTML。

<强> app.js

(function(){
    var app = angular.module("tracklist", ['ngSanitize']);

    app.controller("TrackListController", ['$scope', '$sce', function($scope, $sce) {
        this.tracks = soundcloudtracks;
        $scope.deliberatelyTrustDangerousSnippet = function(html) {
          return $sce.trustAsHtml(html);
        };
    }]);

    // Very basic JSON track coming in from DjangoREST
    var soundcloudtracks = [
        {
            title: 'Track1',
            artist: 'Artist1',
            html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&amp;show_artwork=true&amp;client_id=e72237107739281ffceb867534efd87c"></iframe>',
            url: 'http://soundcloud.com/forss/flickermood',
        },
        {
            title: 'Test2',
            artist: 'Artist2',
            html: '<iframe width="100%" height="400" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F150879755&amp;show_artwork=true&amp;client_id=e72237107739281ffceb867534efd87c"></iframe>',
            url: 'http://soundcloud.com/forss/flickermood',
        },
    ]
})();

<强>的index.html

<!DOCTYPE html>
<html ng-app="tracklist">
    <head>
    </head>

    <body>
        <div>
            <div ng-controller="TrackListController as tracklistcont">
                <div ng-repeat="track in tracklistcont.tracks">
                    <h1>{{ track.title }} - {{ track.artist }} </h1>
                    <div ng-bind-html="deliberatelyTrustDangerousSnippet(track.html)"></div>
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.2.26/angular-sanitize.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

现在一切都按预期工作了！

从JSON数据中注入/嵌入/ $清理HTML到AngularJS

1 个答案: