json - 如何使用 $http.get 检索到的 JSON 数据和 Promise？

Question

我没有考虑 Angular 的 $http.get 是否正确工作，所以也许你可以帮助我重新调整。我正在开发一个向导，其中每个步骤都是一个单独的 html 文件，步骤序列位于一个 JSON 文件中。我想要做的是读取 JSON 文件，然后:

1. 创建步骤列表作为指导。
2. 通过 ng-include 显示该步骤的内容。
3. 创建指向上一步和下一步的按钮。

根据我在 Service vs. Provider vs. Factory 中读到的内容, AngularJS: factory $http.get JSON file和类似的主题，我可以创建一个服务或工厂来读取 JSON。这样做会创建一个 Promise 对象，然后每当数据到达时，该对象就会沿着行传递以进行填充。当将数据插入到绑定(bind)到 View 的模型中时，这可以工作。不过，如果我需要数据来计算下一步按钮之类的东西，我所拥有的只是一个 promise 对象 - 我无法构建到上一个和下一个步骤的链接并设置它们的状态。有没有办法在继续执行代码之前进行 Angular 等待，直到数据到达？这是正确的思考方式吗？

这是一个plunker和一些代码片段:

JSON:

[{
    "name"  : "Step 1",
    "id"    : "step-1",
    "src"   : "step-1.html",
    "state" : "active"
    },

    {
    "name"  : "Step 2",
    "id"    : "step-2",
    "src"   : "step-2.html",
    "state" : "unavailable"
    },

    {
    "name"  : "Step 3",
    "id"      : "step-3",
    "src"   : "step-3.html",
    "state" : "unavailable"
}]

工厂:

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

Controller 片段:

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

HTML

<!-- PREVIOUS AND NEXT STEP BUTTONS -->
<div id="workflow_navigation">
    <ul>
        <li data-ng-repeat="button in workFlow.buttonArray">
            <button class = "{{ button.buttonClass }}" 
            ng-click="workFlow.updateStep(button.destination)">
                {{ button.buttonText }}
            </button>
        </li>
    </ul>
</div>

Answer 1

你说得差不多了，只是有几个问题。首先，您需要将工厂注入(inject)到 Controller 中，而不是作为模块的依赖项。

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

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

其次，您需要等待 promise 兑现后再采取行动:

  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

这应该可以解决主要问题并让您继续。您可以检查和工作plunkr在这里。