2015-09-06 23 views
1

我最近開始玩Ionic,我試圖從OMDb API中提取數據。似乎有一些與CORS的麻煩,我已閱讀http://blog.ionic.io/handling-cors-issues-in-ionic/指南,嘗試添加proxyURL,但似乎沒有工作,或者我失去了一些東西。在OMBd API中使用Ionic?

這裏就是我想要做的事:

.controller('MovieController', ['$scope', '$http', function($scope, $http) { 
    $http.get('http://www.omdbapi.com/?s=Star+Wars').success(function(data) { 
    $scope.movies = data; 
}); 
}]); 

,並試圖在這裏展示的電影數據:

<ion-content ng-controller="MovieController" class="has-subheader"> 
    <ion-list> 
     <ion-item ng-repeat='item in movies' class="item-left item-text-wrap"> 
     <img src="http://placehold.it/100x150" alt="Photo"> 
     <h2>{{ item.Title }}</h2> 
     <h3>{{ item.Year }}</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </ion-item> 
    </ion-list> 
    </ion-content> 

的完整代碼(除了這上面不是很多)這裏http://play.ionic.io/app/84f6a0092ffe

我在這裏錯過了什麼?我的Ionic項目中需要更改某些內容,或者我濫用了OMDb API?非常感謝你提前。

回答

1

好吧,我明白了。似乎我需要以不同的方式請求API。這是一個更新的工作代碼。

angular.module('app', ['ionic']) 

.controller('AppCtrl', function($scope, HttpService) { 
    HttpService.getPost() 
    .then(function(response) { 
     $scope.post = response; 
    }) 
}) 

.service('HttpService', function($http) { 
    return { 
    getPost: function() { 
     return $http.get('http://www.omdbapi.com/?t=Star+Wars') 
     .then(function (response) { 
     console.log('Get Post', response); 
     return response.data; 
     }); 
    } 
    } 
}) 

這隻顯示一個項目。在視圖中刪除ng-repeat

編輯:這很奇怪。並不總是從OMDb Api中獲取。它現在說Cross-Origin Request Blocked