2014-06-15 5 views
6

현재 Angular JS TV 응용 프로그램에서 작업 중입니다. 앱이 API 호출에서 데이터를 가져옵니다. 결과 배열에서 이미지를 얻으려고합니다.AngularJS GET 404를 찾을 수 없음

GET : 여기

여기

<ul class="episode-list"> 
     <li ng-repeat="tvshow in results"> 
      <div class="row-fluid"> 
      <div class="span3"> 
       <img src="{{tvshow.episode.images.screen}}"/> 
      </div> 
     </div> 
     </li> 
    </ul> 

콘솔은 다음과 같은 오류가 반환 된 index.html의 코드 년대 mainController.js

app.controller("mainController", function($scope, $http){ 
    $scope.apiKey = "b3e2e6f87d3aeec3075668a1bd4a78e2"; 
    $scope.init = function(){ 
     //api call requires format, apiKey, date, and days 
     var today = new Date(); 
     //format apiDate according to the api specifications 
     var apiDate = today.getFullYear() + ("0" + (today.getMonth()+1)) + today.getDate(); 
     $scope.results = []; 
     console.log(apiDate); 
     $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function (data){ 
      //connection successful 
      //console.log(data); 
      angular.forEach(data, function (value, index){ 
       var date = value.date;//stores the date of the tv shows 
       angular.forEach(value.episodes, function (tvshow, index){ 
        //this adds the locally store date to the tvshow object 
        tvshow.date = date; 
        $scope.results.push(tvshow); 
       });//end 2nd for each 
      });//end 1st for each 
     }).error(function (error){ 
      //connection failed 
     }); 
    }; 
}); 

에 대한 코드입니다 // localhost를 /tvApp/%7B%7Btvshow.episode.images.screen%7D%7D 404 (찾을 수 없음) localhost/: 29

GET //localhost/tvApp/%7B%7Btvshow.episode.images.screen%7D%7D 404 (찾을 수 없음) angular.min.js : 20

왜 이런 일이 발생하는지 잘 모르겠습니다. 어떤 도움을 주시면 감사하겠습니다. 비슷한 문제가 있지만 성공하지 못했습니다.

+0

코드에 아무런 문제가 없습니다. $ http를 가져 오는 링크가 올바르지 않습니다. 논리적으로 모든 코드가 올바른 것입니다. – Milad

답변

14

대신 사용 srcng-src는 :

<img ng-src="{{tvshow.episode.images.screen}}"> 

이 각 태그가 AngularJS 및 처리되기 전에로드되는 화상을 방지한다. src을 사용하면 리터럴 URL http://www.mydomain.com/{{tvshow.episode.images.screen}}이로드됩니다.

+0

고마워요! 그것은 작동합니다. –

+0

훌륭한 솔루션입니다. –

0

성공 콜백이 실제로 실행되고 있는지 확인하십시오.

tvshow에 화면이 포함 된 이미지가 포함 된 에피소드가 있는지 확인하십시오. 철자가 틀리지 않습니까?

+0

$ scope.results 배열이 채워 지므로 success 콜백이 트리거됩니다. 다른 코드를 볼 필요가 있습니까? 이 예제를 따르고 있습니다 : http://code.tutsplus.com/tutorials/building-a-web-app-from-scratch-in-angularjs--net-32944 –

관련 문제