从JSON数据向AngularJS中注入/embed/$clease HTML

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

因此，我正在尝试创建一个应用程序，该应用程序将显示从soundcloud获取的曲目，并使用soundcloud嵌入式播放器在我的页面上显示它们。我将使用DjanoREST创建一个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重复中的每个元素。有人能帮我吗？在这一点上我完全迷失了方向。

谢谢你抽出时间。

好的，所以我相信我能够解决这个问题。我刚刚创建了一个方法来清理我的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>

现在一切都按预期进行！

相关内容

最新更新

热门标签：