각도 서비스 나는이 공장 서비스를 구축

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를 반환 할 생각입니다.

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

내가 각도에 아주 새로운 해요 :

이

는 컨트롤러입니다.

Answer 1

그것은이

spApp.factory('siteCollection', function(){ 
    var usersObject = []; 
    return { 
    getUsers : function(){... 

수익과 같아야는 데이터에 액세스하는 방법의 목적은,하지만 그들은 범위 관련이 없습니다. 따라서 반환 객체에서 usersObject 만 정의하면 getUsers 내에서 액세스 할 수 없습니다.

Answer 2

코드 두 가지 문제가 있습니다

첫 번째는 다음하지 않은 (하여 공장 등록 usersObject 및 getUsers와 객체를 반환하지만 getUsers에 당신은 변수 "usersObject"에 접근을 시도 반환 된 객체의 속성). 당신은 변수 외부를 선언해야 :

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

두 번째 : 비동기 호출되는 콜백 함수에 usersObject를 입력합니다. AngularJS는 배열의 변경 사항을 등록하지 않습니다. $ rootScope. $ apply()를 사용하면 AngularJS는 새 데이터가 배열에 추가 된 후 다이제스트를 실행하고 뷰를 업데이트합니다.

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

$ rootScope를 사용하면 $ apply()가 매우 깨끗하지 않습니다.

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; 
    } 
    } 
}); 

당신은 데이터가로드 된 후 뭔가를 당신의 컨트롤러에이를 추가, 약속을 사용하기로 결정한 경우 :

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