angularjs - ionic /Angular -从数据库获取数据-已加载数据，但现场无输出

我试图做一个数据库请求，并希望看到现场的输出。
数据已成功加载，但输出不起作用。我只是看不到里面的东西。
这是我的控制器代码：

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('TestCtrl', function($scope, pizzaService) {
  $scope.pizzas = pizzaService.all();
})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})


.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

});

以下是我的服务代码：

angular.module('starter.services', [])
.factory('pizzaService', function($http) {
var pizzas = {};
  $http.get("http://localhost/whatever/www/php/load_Pizzas.php").success(function(data){
  this.pizzas = data;
  console.log('success - pizzas loaded');
  console.log(this.pizzas);
  });

  return {
    all: function() {
      return this.pizzas;
    }
  };
});

这里是html站点的代码：

<ion-view view-title="Pizzas">
<ion-content>
<label class="item item-input">
<input type="text" ng-model="search" placeholder="Suchtext">
</label>
<p ng-show="search">Du suchst gerade nach: {{search}}</p>
<ion-search placeholder="ion Suche" filter="search"></ion-search>
<ion-list>

<ion-item class="item-divider">Pizzas</ion-item>

<ion-item ng-repeat="pizza in pizzas.pizzas | filter:search" class="item-remove-animate item-icon-right">
<h2>{{pizza.name}}</h2>
<p>Preis: {{pizza.price}} Euro</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" >
Löschen
</ion-option-button>
</ion-item>

</ion-list>
</ion-content>
</ion-view>

失败是什么？
这里是console.log的图片：
picture

最佳答案

问题是您正在从控制器向服务发出请求，并且没有等到数据被提取，所以您得到的是空对象，因为立即返回this.pizzas。相反，需要等待请求完成，然后将其附加到所需的作用域。
控制器：

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

// Get promise and wait until data will be fetched, then push to scope.
.controller('TestCtrl', function($scope, pizzaService) {
  pizzaService.all().then(function(payload) {
     $scope.pizzas = payload;
  });

})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})


.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

});

服务：
注意：angular$http函数是一个承诺，所以不需要用延迟的$q方法包装它。

angular.module('starter.services', [])
.factory('pizzaService', function($http) {

  return {
    all: function() {
      // Return promise (async callback)
      return $http.get("http://localhost/whatever/www/php/load_Pizzas.php");
    }
  };
});

意见
注意：您可以使用ion-spinner等待数据准备就绪
和/或ion-refresher

 <ion-view view-title="Pizzas">
    <ion-content>
    <label class="item item-input">
    <input type="text" ng-model="search" placeholder="Suchtext">
    </label>
    <p ng-show="search">Du suchst gerade nach: {{search}}</p>
    <ion-search placeholder="ion Suche" filter="search"></ion-search>
    <ion-list>

<ion-spinner ng-show="!pizzas" icon="spiral"></ion-spinner>

    <ion-item class="item-divider">Pizzas</ion-item>

    <ion-item ng-repeat="pizza in pizzas | filter:search" class="item-remove-animate item-icon-right">
    <h2>{{pizza.name}}</h2>
    <p>Preis: {{pizza.price}} Euro</p>
    <i class="icon ion-chevron-right icon-accessory"></i>
    <ion-option-button class="button-assertive" >
    Löschen
    </ion-option-button>
    </ion-item>

    </ion-list>
    </ion-content>
    </ion-view>