Question

我目前正在通过教授AngularJS的教程和书籍。

我想编写一个简单的应用程序，它从json文件加载一些用户数据并显示它。

现在这是JavaScript文件的相关部分，它可以实现我的目标：

这是我的代码：

angular.module('myModule', [])

.controller('myCtrl', function($scope, $http) {
    $http.get('../mockdata/users_js.json').success(function(data, status, headers, config) {
      $scope.users = data;
    });
});

现在，如果我尝试创建一个单独的模块来导入我的数据，我就失败了：

angular.module('myModule', [])

.controller('myCtrl', function($scope, Users) {
  $scope.users = Users.query();
})

.factory('Users', function($http) {
  var users = {};
  users.query = function() {
    // In real apps, we'd pull this data from the server...
    $http.get('../mockdata/users_js.json').success(function(data, status, headers, config) {
      this.data = data;
    });
    return this.data;
  };
  return users;
});

我做错了什么？我该如何解决这个问题？

Answer 1

在users.query()中启动异步 HTTP请求，然后才有机会完成this.data的返回undefined。

您可以查看$resource，它会返回一个可以立即分配给$scope变量的承诺。它将在请求完成时应用正确的值。

.factory('Users', function($resource) {
  var users = {};
  users.query = function() {
    return $resource('../mockdata/users_js.json').get();
  };
  return users;
});

Answer 2

如果您想知道如何使用$ http：

执行此操作

angular.module('myModule', [])

.controller('myCtrl', function($scope, Users) {
  Users.then(function(data){
    $scope.users = data;
  });
})
.factory('Users', function($http) {
  var Users = {};
  Users = $http.get('../mockdata/users_js.json').then(function (response) {
    return response.data;
  });
  return Users;
});

这是一个实时的Plnkr。

在AngularJS中为简单函数创建单独的模块

2 个答案: