角度jsを使用してjsonファイルから外部URLを読み取る

Question

角度jを使用してjsonファイルに保存されているURLから外部メディアコンテンツを取得または表示するにはどうすればよいですか？私は外部ソースからメディアを表示することはできませんよ

JSON

"media": [ 
     { 
      "title": "Example_1", 
      "url": "http://www.w3schools.com/html/mov_bbb.mp4" 
     }, 
     ……. 
] 

コントローラ

controller('Controller', ['$scope','$http', function($scope, $http) { 
    $http.get('myjson.json').success(function (data){ 

     $scope.medianew = data.media; 

    }); 

HTML

<div class="panel-body" ng-repeat = "md in medianew">       
     <video ng-src="{{md.url}}" width="240" controls></video> 
</div> 

。私はここで間違っていますか？

Answer 1

あなたの問題は、あなたが角度から$sceサービスを使用する必要があり、このone.

と少し似ています。私はあなたの問題を解決するためにplnkrを作った。

.controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) { 

    $http.get('myjson.json').success(function (data){ 
    $scope.medianew = data.media.map(function (m) { 
     m.url = $sce.trustAsResourceUrl(m.url); 
     return m; 
    }); 

    }]); 

Answer 2

jsonファイルのコンテンツは、基本的にはjsonというコンテンツとして解析する必要があります。

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope, $http) { 
    // parse the string content as json 
    $scope.mediaNew = JSON.parse('[{"title":"Example_1","url":"http://www.w3schools.com/html/mov_bbb.mp4"}]'); 
    $scope.trustSrc = function(src) { 
     // trust an insecure url 
     return $sce.trustAsResourceUrl(src); 
    }; 
} 

<div ng-controller="MyCtrl"> 
    <div class="panel-body" ng-repeat = "md in mediaNew">  
    <h1> 
     {{md.title}} 
    </h1> 
    <video ng-src="{{ trustSrc(md.url) }}" width="240" controls></video> 
    </div> 
</div> 

の作業のデモ - https://jsfiddle.net/aghosh08/c2d8pwr7/