Question

我想构建一个多步骤向导，其中包含ajax调用：

我目前使用ui.router查看向导步骤的视图，它们工作正常。在第一页上，用户输入一些数据，例如playerid。在第二页上，我想显示从服务器提取的与playerid对应的一些数据。

我该如何构建？因为我读到控制器应该只写入模型，但我需要阅读用户输入的playerid进行ajax调用..？

这是一个Plunk我现在怎么做： http://plnkr.co/edit/4ZEdYHUqovn2YfkUpp2y?p=info

Answer 1

我个人会这样做（plunker）：

路由：

$stateProvider
    .state('view1', {
        url: "/view1",
        templateUrl: "view1.html",
        controller:"WizardCtrlStep1"
    })
    .state('view2', {
        url: "/view2",
        templateUrl: "view2.html",
        controller:"WizardCtrlStep2",
        params:{
          playerId:null
        },
        resolve:{
          player:function($http, $stateParams){
            //you can use the player id here
            console.log($stateParams.playerId);
            return $http.get("test.json");
          }
        }
    })

我真的很想每个州都有一个控制器。它可以避免弄乱。

我还在step2视图加载之前使用解析来执行ajax调用。

这是第二步的控制器

//I inject the "player" resolved value
controller('WizardCtrlStep2', function($scope, player) {
  $scope.name = 'World';
  //to access the result of the $http call use .data
  $scope.player = player.data;
})

最后是HTML

<input type="text" ng-model="main.playerId">
<button ui-sref="view2({playerId:main.playerId})">proceed</button>

在这里，我给ui-sref一个param for＆＃34; playerId＆＃34;将在解析函数中使用。

希望很明显，如果您有任何问题可以随意提问。

如何使用angularjs中的ajax调用构建多步向导

1 个答案: