ionic/angular - 从数据库中获取数据 - 数据已加载，但现场没有输出

Question

我尝试执行数据库请求并希望在现场查看输出。数据已成功加载，但输出不起作用。我在 .

中什么也看不到

这是我的控制器的代码：

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

Answer 1

问题是您从控制器向服务发出请求，但没有等到数据被获取，所以您得到的是空对象，因为立即 return 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 函数是一个 promise，所以你不需要用延迟的 $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>

Answer 2

Controller.js

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

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

.controller('TestCtrl', function($scope, pizzaService) {
  pizzaService.all().then(function(payload) {
     $scope.pizzas = payload;
     console.log(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
  };

});

Service.js

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

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

测试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-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>

这里是截图

ionic/angular - 从数据库中获取数据 - 数据已加载，但现场没有输出

ionic/angular - get data from database - data loaded, but no output on site

database

request

angularjs

ionic-framework