Question

我正在使用Ionic构建应用程序。首先，我基于TABS模板创建一个项目。因此，在创建之后，我试图通过API进行聊天但不能正常工作。这是services.js的代码：

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

.factory('Chats', function($http) {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  // var chats = [{
  //   id: 0,
  //   name: 'Ben Sparrow',
  //   lastText: 'You on your way?',
  //   face: 'img/ben.png'
  // }, {
  //   id: 1,
  //   name: 'Max Lynx',
  //   lastText: 'Hey, it\'s me',
  //   face: 'img/max.png'
  // }, {
  //   id: 2,
  //   name: 'Adam Bradleyson',
  //   lastText: 'I should buy a boat',
  //   face: 'img/adam.jpg'
  // }, {
  //   id: 3,
  //   name: 'Perry Governor',
  //   lastText: 'Look at my mukluks!',
  //   face: 'img/perry.png'
  // }, {
  //   id: 4,
  //   name: 'Mike Harrington',
  //   lastText: 'This is wicked good ice cream.',
  //   face: 'img/mike.png'
  // }];
  var chats = function(){ 
    $http.get("http://lucassmuller.com/work/projetoblog/api.php?action=posts")
    .success(function(data) {
        return data;
        console.log='data success';
    })
    .error(function(data) {
        console.log='data error';
    });
  }

  return {
    all: function() {
      return chats;
    },
    remove: function(chat) {
      chats.splice(chats.indexOf(chat), 1);
    },
    get: function(chatId) {
      for (var i = 0; i < chats.length; i++) {
        if (chats[i].id === parseInt(chatId)) {
          return chats[i];
        }
      }
      return null;
    }
  };
});

但这不起作用。我可以做的是让$ http获取API的数据！？

Answer 1

首先，我刚刚改变了它：

all: function() {
       return chats;
     },

for：all: chats,

此外，根据此deprecation notice，方法success和error已被弃用：

弃用通知

已弃用$http遗留承诺方法success和error。请改用标准then方法。如果$httpProvider.useLegacyPromiseExtensions设置为false，则这些方法会抛出$http/legacy错误。

这是一个代码片段：

＆＃13;

 (function() {
   "use strict";
   angular.module('app', [])
     .controller('mainCtrl', function(Chats) {
       Chats.all();
     })

   .factory('Chats', function($http) {
     var chats = function() {
       $http.get("http://lucassmuller.com/work/projetoblog/api.php?action=posts").
       then(function(response) {
         console.log('$http.get worked!!');
       }, function (response) {
         console.log('error!!');
       });
     }
     return {
       all: chats,
       remove: function(chat) {
         chats.splice(chats.indexOf(chat), 1);
       },
       get: function(chatId) {
         for (var i = 0; i < chats.length; i++) {
           if (chats[i].id === parseInt(chatId)) {
             return chats[i];
           }
         }
         return null;
       }
     };
   });
 })();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as main">

</body>

</html>

＆＃13;

Answer 2

工厂方法需要返回$http承诺，以便在承诺解析时可以访问控制器中的数据

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

      function getChats(){
          // return promise from function
          return $http.get("http://lucassmuller.com/work/projetoblog/api.php?action=posts");
      }

      return {
          all: getChats
      }
}

现在在控制器中，您使用承诺的then()将数据分配到范围

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

现在，如果要存储数组，可以在工厂方法中使用另一个then()：

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

  var factory = {
    chats: null,
    all: getChats
  };


  return factory;

  function getChats() {
    // return promise from function
    return $http.get("http://lucassmuller.com/work/projetoblog/api.php?action=posts").then(function(response) {
      factory.chats = response.data;
      return factory.chats;
    });
  }

});

在控制器中

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

Answer 3

由于问题已经得到解答，请允许我指出您的代码中没有人愿意谈论的问题。

您在代码中使用了这些：

//..
console.log='data success';
// some code     
console.log='data error';

使用console.log的正确方法是将参数传递给它，因为它是一个函数。 Rougly，您的浏览器的代码如下：

function console() {
  this.log = function() {
    // code that logs to the console
  }
}

执行console.log = 'data success'时，您将字符串'data success'分配给控制台log的{{1}}属性。有人提到实际的功能代码丢失，而object将无法按照页面其他部分的方式工作。

console.log

$ http.get无法在.factory工作

3 个答案:

弃用通知