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;
   });
 
})

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