Question

我是Angular JS和Ionic框架的新手。

在services.js文件中，在.factory方法内，调用webservice并显示带有json响应的警报，如下面的屏幕截图所示

但是，列表视图未填充。我试过两种方式。

尝试01：

Angular JS代码

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

.factory('Chats', function($http) {

var chats;


  return {
    all: function() {

  $http.get(url).
  then(function(response) {
      //alert(JSON.stringify(response.data.employee));
      chats=response.data.employee;
      alert(JSON.stringify(chats));
      return chats;
  }, function(error) {
    alert(JSON.stringify(error));

  });
       return chats;
    }

  };
});

HTML5代码

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap">
        <img ng-src="http://findicons.com/files/icons/820/simply_google/256/google_android.png">
        <h2>{{chat.employeeCode}}</h2>
        <p>{{chat.createdBy}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

尝试2

在此尝试中，我已将同一文件中的chats变量分配给以下数组

var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
  }];

var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
  }];

HTML5

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap">
        <img ng-src="https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

尝试2 正在运行，因为我已将硬编码的json数组分配给变量。但是，尝试1 无效。

更新：

controller.js

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

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

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

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

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

请帮我找到解决方案。

Answer 1

您并没有等待在控制器中解决的承诺。

将Chats.all()的控制器调用更改为：

Chats.all().then(function(chats) {
    $scope.chats = chats;
});

此外，将服务中的所有功能更改为：

function all() {
  return $http
           .get(url)
           .then(function(response) {
              chats = response.data.employee;
              return chats;
           }, function(error) {
             alert(JSON.stringify(error));
           });
}

Angular JS-来自webservice的响应没有填充到列表中

1 个答案: