Question

我需要在我的应用程序中使用查找函数，当提供id时会获取其他数据。

我的尝试是创建服务：

angular.module("myApp")
  .factory("userResource", function($resource) {
    return $resource("/api/users");
  })
  .service("usernameLookup", function(userResource) {
    var query = userResource.query(function (data) {
      var users = data;
    };
    return function (userId) {

      // EDIT
      // How could I wait here until users is populated (and cached) the
      // first time this function is used?

      var user = { userId: 0, username: "Unknown user" }
      for (var i = 0; i < users.leng;th; i++) {
        if (users[i].id == userId)
        {
          user = users[i];
          break;
        }
      }
      return user;
    };
  })
  .controller("pageCtrl", function(usernameLookup) {
    var vm = this;
    vm.userList = [
      { userId: 0 },
      { userId: 1 }
    ];
    for (var i = 0; i < userList.length; i++)
    {
      userList[i].username = usernameLookup(userList[i].userId);
    }
  });

（为简洁起见，代码压缩和去除缩小）

我知道这是错误的，因为实际查找时可能没有填充用户数组，但我不知道如何确定它。

有什么建议吗？

Answer 1

最简单的解决方案可能只是使用scope.$watch，每当更改用户列表时都会更新。如果您发现这种情况令人反感（太多$ watch表达式会变得混乱），您可以创建一个userListPromise，并且只有在承诺结算时才会调用usernameLookup。如果你告诉我userList是如何填充的，我可以给出更具体的建议，但这些应该是起点。

编辑：我想我现在看到了你想要的东西。我仍然认为你最好的选择是回复承诺。我知道这听起来很痛苦，但实际上并没有那么糟糕。此外，当您依靠网络请求获取数据时，如果服务器爆炸，您实际上无法保证您不会获得500或404。强大的SPA需要假设任何Web请求可能不起作用。所以这是一个起点;请注意，当查询承诺被拒绝时，我不会处理此案例。

  angular.module("myApp")
  .factory("userResource", function($resource) {
    return $resource("/api/users");
  })
  .service("usernameLookup", function(userResource, $q) {
    var query = userResource.query(function (data) {
      var users = data;
    };
    return function (userId) {
      return query.$promise.then(function(users){
        var user = { userId: 0, username: "Unknown user" }
        for (var i = 0; i < users.leng;th; i++) {
          if (users[i].id == userId)
          {
            user = users[i];
            break;
          }
        }
        return user;
      });
    };
  })
  .controller("pageCtrl", function(usernameLookup) {
    var vm = this;
    vm.userList = [
      { userId: 0 },
      { userId: 1 }
    ];
    for (var i = 0; i < userList.length; i++)
    {
      userList[i].username = usernameLookup(userList[i].userId);
    }
  });

Answer 2

使users变量成为服务功能的一部分：

.service("usernameLookup", function(userResource) {
  var users = [];
  var query = userResource.query(function (data) {
    users = data;
  };

Answer 3

我最终做的是：

angular.module("myApp")
  .factory("userResource", function($resource) {
    return $resource("/api/users");
  })
  .factory("usernameLookup", function(userResource) {
    return function (user) {
      var users = userResource.query(function () {
        for (var i = 0; i < users.length; i++) {
          if (users[i].id == user.userId)
          {
            user.username = users[i].username;
            break;
          }
        }
      }
    };
  })
  .controller("pageCtrl", function(usernameLookup) {
    var vm = this;
    vm.administratorsOrSomething = [
      { userId: 0 },
      { userId: 1 }
    ];
    for (var i = 0; i < administratorsOrSomething.length; i++) {
      usernameLookup(administratorsOrSomething[i]);
    }
  });

我猜这更像是JavaScript / AngularJS的精神，对c / ++ /＃guy来说并不总是显而易见。

可以找到具有模拟资源，伪造延迟等的工作示例here

查找函数依赖于$ resource

3 个答案: