순차적으로 번호가 매겨진 json 파일을 앵귤러 1.2로로드하기 위해 일련의 $ http 호출을 동적으로 설정합니다.

Question

우리 페이지의 레이아웃 세부 정보가 들어있는 일련의 json 파일 (page1.json, page2.json 등)이 있습니다.

지금까지 필자는 각 페이지의 데이터를 필요에 따라 모두로드했지만 모든 기능이 제대로 작동했지만 각도 앱이 시작될 때 모든 페이지의 페이지 데이터가 필요하다는 점은 분명합니다. 별도의 파일에 있어야합니다 (디자이너를 기쁘게하기 위해).

여기에 내가 노력했습니다 내용은 다음과 같습니다

var app = angular.module("templatesApp", ['bulletComponent', 'popupComponent', 'imageComponent', 'paragraphComponent', 'ngRoute']); 

var numberOfPages = 0; 
var pageData = []; 
var pageIndex = 0; 

/*Factory that runs http.get on content.json, used by multiple controllers */ 
app.factory('content', ['$http', 'completions', 'pages', function($http, completions, pages) { 
    var url = 'json/content.json'; 
    return $http.get(url) 
     .success(function(data) { 
      // loop through pages and add corresponding page objects to completions.js service 
      for (var i=0; i<data.length; i++) { 
       completions.addPage(data[i].title); 
       numberOfPages += 1; 
      } 
      loadPageData(pages, completions); 
      return data; 
     }) 
     .error(function(data) { 
      return data; 
     }); 
}]); 

var loadPageData = function(pages, completions) { 
    console.log("loadPageData called when pageIndex = "+pageIndex); 
    pages.success(function(loadedData) { 
     pageData.push(loadedData); 
     completions.addPageComponents(pageIndex + 1, pageData[pageData.length-1]); 
     pageIndex += 1; 
     if (pageIndex < numberOfPages) { 
      loadPageData(pages, completions); 
     } 
    }); 
} 

app.factory('pages', ['$http', function($http) { 
    console.log("pages factory called with pageIndex = "+pageIndex); 
    var url = 'json/page'+ (pageIndex + 1) +'.json'; 
    return $http.get(url) 
     .success(function(loadedData) { 
      return loadedData; 
     }) 
     .error(function(loadedData) { 
      return loadedData; 
     }); 
}]); 


/*Controller for menu, data fetched from factory*/ 
app.controller('menuCtrl', ['$scope', '$http', 'content', function($scope, $http, content) { 

    content.success(function(data) { 
     $scope.pages = data; 
    }); 

}]); 


/*Controller for individual pages. Makes XHR to json page for pages data. 
    Has function for calculating column widths*/ 
app.controller('pageCtrl', ['$scope', '$routeParams', '$http', 'content', 'completions', function($scope, $routeParams, $http, content, completions) { 

    $scope.page = pageData[$routeParams.pageId-1]; 

    $scope.getStyle = function(singleCase, device) { 
     if (singleCase == undefined) 
      return ''; 

     return assignBootstrap(singleCase, device); 
    }  

    $scope.pageId = $routeParams.pageId; 
}]); 

을 그래서 잘하면 당신이 볼 수 있으며, '내용'공장 '이 된 MenuCtrl'에 의해 불려갑니다. 먼저 content.json 파일 (페이지 제목 목록)을로드 한 다음 필요한 페이지마다 'pages'팩토리를 호출해야하는 재귀 함수 인 'loadPageData'를로드합니다.

문제는 console.logs가 'pages'팩터 리가 loadPatcher 함수조차도 한 번 호출된다는 것을 보여줍니다. 각 html 페이지는 동일한 (첫 번째) 데이터 집합을 전달합니다.

나는 '페이지'공장을 올바르게 사용하지 않는다고 가정하지만 정확한 옵션이 무엇인지 알지 못합니다.

누군가 포인터가 있다면, 나는 그들을 듣고 싶어합니다.

편집
의견을 보내 주셔서 감사합니다. 나는 내가 알아야 할 것이 무엇인지 깨달았다 고 생각한다 : 어떻게 일련의 약속 ($ http 호출)을 동적으로 설정 하는가? 페이지 수는 다양하므로 하드 코딩 할 수 없습니다.

Answer 1

다음과 같은 결과가 있습니다.

이

app.factory('content', ['$http', 'completions', function($http, completions) { 
    var url = 'json/content.js'; 
    return $http.get(url) 
     .success(function(data) { 
      // loop through pages and add corresponding page objects to completions.js service 
      for (var i=0; i<data.length; i++) { 
       completions.addPage(data[i].title); 
       numberOfPages += 1; 
      } 
      // load page .js files 
      var tempData = getData(0, completions);    
      for (var i = 1; i < numberOfPages; i++) { 
       (function (i) { 
        tempData = tempData.then(function() { 
         return getData(i, completions); 
        }); 
       }(i)); 
      } 

      return data; 
     }) 
     .error(function(data) { 
      return data; 
     }); 
}]); 

// loads individual page data, stores in pageData and sets up SCORM objectives from completable components (in completions service) 
function getData(id, completions) { 
    return $.ajax({ 
     url: 'json/page'+ (id + 1) +'.js', 
     dataType: 'json' 
    }).done(function(d) { 
     // push data into pageData array, for use later when pages are routed to 
     pageData.push(d); 

     // register this page's completable components in SCORM 
     completions.addPageComponents(id + 1, d); 

    }).fail(function() { 
     console.log('ERROR loading page index '+id); 
    }); 
} 

나는 $ q.all 또는 약속의 의미를 만들 수 없습니다,하지만 동료 그래서 사용 대답 다른 나를 지적이 100 % 가장 좋은 방법이지만, 잘 작동하는 것 같군 경우 확실하지 않음 위와 비슷한 것.

'content'팩토리가 호출되면 getData 함수를 호출하여 첫 ​​번째 .js 파일을로드합니다. 페이지 수까지를 반복, 나는

tempData = tempData.then(... 

이 ... 그 부하는 다음을 시작하기 전에 완료를 기다립니다 것을 의미합니다 ... 라인을 추측하고있어. 현재로드 된 데이터를 저장하기위한 핵심 사항은 getData.done 함수에서 일어나는 일입니다. 로드 된 데이터는 나중에 사용할 수 있도록 pageData 배열로 푸시되고 데이터는 완료 서비스에 전달되어 SCORM에서 목표를 설정합니다.

의도 한대로 작동합니다!