ionic 向後台請求json 數據 在頁面上的顯示問題

我向服務器請求數據，獲取到的數據竟然不能顯示在頁面上  我那個氣啊.....

 <ul>
    <!-- <li ng-repeat="phone in phones">
             {{phone.name}}
             <p>{{phone.snippet}}</p>
           </li> -->
   <li ng-repeat="x in names">
     {{ x.Name + ', ' + x.Country }}
   </li>
 </ul>

頁面上綁定了數據

創建服務  HomeExchangeList

 .service('HomeExchangeList', function($rootScope, $http, $log) {
     this.getHomeExchange = function() {
       var rates = $http({
         method: 'GET',
         url: 'http://www.w3schools.com//website/Customers_JSON.php'
       }).success(function(data) {
         $log.log(data);
         // removed your return data; it doesn't do anything, and this success is only added to log the result. if you don't need the log other than for debugging, get rid of this success handler too.
       });

       return rates;
     };
   })

在控制器中 調用數據

 .controller('DashCtrl', function($scope, HomeExchangeList) {
     HomeExchangeList.getHomeExchange().success(function(data) {
       $scope.names = data
     });
   })

注：

這裏的控制器 注入了HomeExchangeList 服務 ；然後調用服務HomeExchangeList 的getHomeExchange()函數 ，在回調函數.success（function(data){ }）裏面綁定數據 只有這樣才能顯示

2. 另外一種

創建服務 phoneService

 .factory('phoneService', function($http, $q) {
    return {
      getPhones: function() {
        var deferred = $q.defer();
        $http.get('http://www.w3schools.com//website/Customers_JSON.php').success(function(data) {
           console.log('success');
           deferred.resolve(data);
        }).error(function(){
           console.log('error');
           deferred.reject();
        });
        return deferred.promise;
      }
    }
 })

創建控制器

 .controller('DashCtrl2', function($scope,phoneService) {

   phoneService.getPhones().then(function(data) {
        $scope.names = data;
    });
 })

注：

服務phoneService 中有promise 的影響 ；所以在控制器中注入phoneService 服務時 ，調用服務的函數 需要 .then(function(data){}) 裏面綁定數據

3. 還有這種

.factory('Recipe',['$resource',function($resource){
    return $resource('http://www.w3schools.com//website/Customers_JSON.php');
}])
.factory('loadRecipes',['Recipe','$q',function(Recipe,$q){
    return function(){
        var defer = $q.defer();
        Recipe.query(function(recipes){
            defer.resolve(recipes)
        },function(){
            defer.reject();
        });
        return defer.promise;
    }
}]);

控制器為

.controller('DashCtrl1', function($scope,loadRecipes) {

  loadRecipes().then(function(data) {
       $scope.names = data;
   });

})

這種跟第二種一樣的原理......