JSON 데이터의 AngularJS에 HTML 삽입/embed/$

해결 방법을 찾을 수 없다는 문제가 있습니다.

그래서 soundcloud에서 가져온 트랙을 표시하고 soundcloud 임베디드 플레이어를 사용하여 내 페이지에 표시하는 응용 프로그램을 만들려고합니다. DjangoREST를 사용하여 표시 할 모든 트랙의 JSON 목록을 만듭니다. JSON은 임베드 된 HTML을 저장하는 항목을 가지며 패키지화되어 AngularJS 프런트 엔드로 전송됩니다.

내가 직면 한 문제는 ng-bind-html을 사용한 후에도 임베드 된 HTML을 실제로 표시 할 수 없다는 것입니다.

내가 직면 한 문제를 설명하기 위해 작은 데모를 만들었습니다.

내가 들어오는 HTML을 $sanitize 필요

(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>

app.js하지만 제대로 각 요소를 살균하는 방법을 모르겠어요 ng-repeat 내에서. 아무도 나를 도울 수 있습니까? 나는이 시점에서 완전히 길을 잃었다.

감사합니다.

출처

2014-11-10 FunkyFresh

그래, 문제를 해결할 수 있었다고 생각합니다. 방금 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>

예상대로 이제 모든 것이 작동!

출처

2014-11-10 18:24:40 FunkyFresh

당신이 그것을 함수로 감싸서 해결해 주어서 좋습니다. – SoluableNonagon

JSON 데이터의 AngularJS에 HTML 삽입/embed/$

답변

관련 문제