javascript - Angular 服务/工厂未定义错误

Question

我构建了这个工厂服务:

spApp.factory('siteCollection', function(){
  return {
    usersObject : [],
    getUsers : function (){
      $().SPServices({
        operation: "GetUserCollectionFromSite",
        completefunc: function(xData, Status) {
          var responseXML = $(xData.responseXML);
          responseXML.find("User").each(function() {
            usersObject.push({
              id: $(this).attr("ID"),
              name: $(this).attr("Name"),
              domainAccount: $(this).attr("LoginName")
            });
          });
        }
      });
      return usersObject;
    }
  }
})

它应该返回我在顶部声明的 usersObject，但控制台给我一个 undefined object 错误。

这是 Controller :

spApp.controller('userCtrl', 
    function userCtrl($scope,siteCollection){
        $scope.users = siteCollection.getUsers();
    }
);

我是 Angular 的新手。

Answer 1

您的代码有两个问题:

第一个:您的工厂返回一个具有属性 usersObject 和 getUsers 的对象，但在 getUsers 中您尝试访问变量“usersObject”(这不是返回对象的属性)。您必须在外部声明变量:

var usersObject = [];
return {
  getUsers: function () {
    // ...
    return usersObject;
  }
};

第二个:在异步调用的回调函数中填充 usersObject。 AngularJS 不会注册数组中的更改。您可以使用 $rootScope.$apply()，然后 AngularJS 将运行摘要并在新数据添加到数组后更新 View 。

spApp.factory('siteCollection', function ($rootScope) {
  // ...
  $rootScope.$apply(function () {
    responseXML.find("User").each( function () { ... } );
  });
}

使用 $rootScope.$apply() 不是很干净。更好的方法是返回一个 promise :

spApp.factory('siteCollection', function ($q) {
  return {
    getUsers : function (){
      var deferred = $q.defer();

      $().SPServices({
        operation: "GetUserCollectionFromSite",
        completefunc: function(xData, Status) {
          var responseXML = $(xData.responseXML),
              usersObject = [];

          responseXML.find("User").each(function() {
            usersObject.push({
              id: $(this).attr("ID"),
              name: $(this).attr("Name"),
              domainAccount: $(this).attr("LoginName")
            });
          });

          deferred.resolve(usersObject);
        }
      });

      return deferred;
    }
  }
});

如果您决定使用 promises，请将其添加到您的 Controller 以在加载数据后执行某些操作:

siteCollection.getUsers.then(function (users) {
  // ...
});