Чтение внешнего URL из файла json с использованием углового js

Question

Чтение внешнего URL из файла json с использованием углового js

0

Как я могу получить/отобразить внешний мультимедийный контент из URL-адреса, хранящегося в json файле, с помощью угловых js?

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>

Я не могу отображать носители из внешних источников. Что я здесь делаю неправильно?

kazupooot 22 март 2016, в 08:26

Источник

1

Вы console.log(data) ?
michelem 22 март 2016, в 06:55
0

Получение ошибки: $ interpolate: interr Ошибка интерполяции
user4596341 22 март 2016, в 07:00
0

docs.angularjs.org/error/$sce/...
Amit Kumar Ghosh 22 март 2016, в 09:42

Показать ещё 1 комментарий

Теги:

angularjs

json

2 ответа

0

В основном вам нужно проанализировать содержимое 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/

Amit Kumar Ghosh 22 март 2016, в 05:54

0

Не работает!!
user4596341 22 март 2016, в 08:11
0

хорошо синтаксический анализ на самом деле работает, но angular блокирует загрузку содержимого из небезопасного URL для
Amit Kumar Ghosh 22 март 2016, в 09:58
0

см. мое редактирование здесь.
Amit Kumar Ghosh 22 март 2016, в 10:10

Показать ещё 1 комментарий

Ещё вопросы

Получение ошибки: $ interpolate: interr Ошибка интерполяции
хорошо синтаксический анализ на самом деле работает, но angular блокирует загрузку содержимого из небезопасного URL для

kazupooot · Accepted Answer · 2016-03-22T07-18-00.000Z

Ваша проблема несколько похожа на эту .

Вам нужно использовать услугу $sce от углового. Я сделал 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;
    });

  }]);

Это именно то, что я хочу. Спасибо!