如何使用$http.get检索的JSON数据和承诺？

我没有考虑angular的$http.get workings，所以也许你可以帮我重新调整。我正在开发一个向导，其中每个步骤都是一个单独的html文件，步骤的顺序是一个JSON文件。我要做的是读取JSON文件，然后：

创建一个步骤列表作为指南

通过ng include显示步骤的内容

创建指向上一步和下一步的按钮

根据我在中阅读的内容和类似主题，我可以创建一个服务或工厂来读取JSON。这样做会创建一个promise对象，然后每当数据到达时，该对象就会被传递到要填充的行。将数据插入到绑定到视图的模型中时，可以使用此选项。但是，如果我需要数据来计算下一步按钮之类的东西，我所拥有的只是一个promise对象——我还不能建立到上一步和下一步的链接并设置它们的状态。在继续执行代码之前，有没有办法让用户等待数据到达？这样想对吗

下面是一个示例和一些代码片段：

JSON:

工厂：

workflow.factory('getWorkflow', function($http, $q) {
   return {
     getFlow: function() {
       var deferred = $q.defer();
       $http.get('steps.json').success(function(data) {
          deferred.resolve(data);
       }).error(function(){
          deferred.reject();
       });
       return deferred.promise;
     }
   }
});

控制器代码段：

var workflow = angular.module("workflow", ['getWorkflow']);

workflow.controller("showStep", function($scope) {
    $scope.workFlow = {};         // Create the workFlow object
    $scope.workFlow.steps = [];   // Create an empty array to hold the steps
    $scope.workFlow.steps = getWorkflow.getFlow(); 

... set the first step as the active step and point to the HTML file ...

    $scope.workFlow.buildNavButtons = function() {
    scope.workFlow.buttonArray = [];    // Create/reset the array of buttons to nothing

    // The button for the PREVIOUS step.
    if ($scope.workFlow.activeStepIndex > 0) {  // Only add button if not the first step
        var prevButton = {};
        prevButton["destination"] = $scope.workFlow.activeStepIndex - 1;
        prevButton["buttonText"] = "<< " + $scope.workFlow.steps[$scope.workFlow.activeStepIndex - 1].name;
        prevButton["buttonClass"] = "workflow-previous";

        $scope.workFlow.buttonArray.push(prevButton);
    }
...

var-workflow=angular.module（“workflow”，['getWorkflow']）；
workflow.controller（“showStep”，函数（$scope）{
$scope.workFlow={}；//创建工作流对象
$scope.workFlow.steps=[]；//创建一个空数组来保存这些步骤
$scope.workFlow.steps=getWorkflow.getFlow（）；
…将第一步设置为活动步骤并指向HTML文件。。。
$scope.workFlow.buildNavButtons=函数（）{
scope.workFlow.buttonArray=[]；//创建/重置按钮数组为空
//上一步的按钮。
如果（$scope.workFlow.activeStepIndex>0）{//如果不是第一步，则仅添加按钮
var prevButton={}；
prevButton[“destination”]=$scope.workFlow.activeStepIndex-1；
prevButton[“buttonText”]=“您的操作几乎正确，只是有几个问题。
首先，您需要将工厂注入控制器，而不是作为模块的依赖项

var workflow = angular.module("workflow", []);

workflow.controller("showStep", function($scope, getWorkflow) {

第二，你需要等待承诺兑现后再行动：

  getWorkflow.getFlow().then(
    function(data) {
      $scope.workFlow.steps = data
      console.log($scope.workFlow.steps);

      // "activeStep" controls which step appears on screen.  
      // This initialize it and loads default content.
      $scope.workFlow.activeStep = $scope.workFlow.steps[0];
      $scope.workFlow.activeStepIndex = 0;
      console.log($scope.workFlow.activeStep);
      $scope.workFlow.content = $scope.workFlow.activeStep.src; // The display of the step content itself - changing this changes the display.

    }); // Use the factory below

这将解决promise的主要问题，并允许您继续。您可以在这里检查和工作。
这是有效的-谢谢！我不明白.then方法是如何工作的，现在它是有意义的。（如果可以，将+1。）
var workflow = angular.module("workflow", []);

workflow.controller("showStep", function($scope, getWorkflow) {

  getWorkflow.getFlow().then(
    function(data) {
      $scope.workFlow.steps = data
      console.log($scope.workFlow.steps);

      // "activeStep" controls which step appears on screen.  
      // This initialize it and loads default content.
      $scope.workFlow.activeStep = $scope.workFlow.steps[0];
      $scope.workFlow.activeStepIndex = 0;
      console.log($scope.workFlow.activeStep);
      $scope.workFlow.content = $scope.workFlow.activeStep.src; // The display of the step content itself - changing this changes the display.

    }); // Use the factory below