Question

我需要实现数据收集＆＃34;向导＆＃34;应用程序，使用AngularJS。当用户进入下一个向导页面时，我面临一个选择：a）让每个页面部分都有自己的＆＃34;下一个＆＃34;按钮，hg-click显式调用预定义的下一个部分页面，或b）只有一对＆＃34; Next / Previous＆＃34;通过在$ rootScope中存储curtest向导步骤，以更动态的方式实现按钮和实现导航。我的问题：如果我选择了选项＆＃34; b＆＃34;，基于$ rootScope.currentWizardStep值实现动态路由的方法是什么？或者，也许，有更好的方法来做这一切。如果你知道这样的话，请分享：）

Answer 1

使用statefull数据填充$ rootScope总是一个坏主意。根据您的页面大小（或者更确切地说：您将拥有多少个子页面），我甚至建议不要使用路由，而是使用ng-show - 指令和单个控制器，递增表示当前子页面的值。像这样：

<div ng-show="pageNum == 1">
   <h1>First Page</h1>
</div>
<div ng-show="pageNum == 2">
   <h1> Second Page</h1>
</div>
<input type="button" ng-click=pageNum++" value="Next Page"/>

当然，只有在您不需要渲染Subpages服务器端时才可以这样做。

Answer 2

您正在寻求实施$routParams。

这允许您命名URL的片段，然后将其转换为键/值对。

来自文档：

 // Given:
 // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
 // Route: /Chapter/:chapterId/Section/:sectionId
 //
 // Then
 $routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

然后在您的控制器中，您只需检查URL以确定它们所在的页面。使用文档中给出的示例，如果您想确定它们所在的章节，您可以这样做：

var chapter = $routeParams.chapterId;

这仍然允许您只保留一组“下一个/上一个”按钮。我不知道你是如何增加页面（不同的名称，页码等）。但是跟踪下一个/上一个页面应该是相当小的。特别是如果你有一个所有页面的主阵列＆amp;你期望他们进入的顺序。

var wizardPages = {
    one: {previous: 'start.html', current: 'one.html', next: 'two.html'},
    two: {previous: 'one.html', current: 'two.html', next: 'three.html'},
    three: {previous: 'two.html', current: 'three.html', next: 'end.html'}
};

$scope.next = function(){
    var current = $routeParams.page;
    $scope.template = wizardPages[current].next;
};

$scope.previous = function(){
    var current = $routeParams.page;
    $scope.template = wizardPages[current].previous;
};

然后是你的HTML

<div class="" ng-include="template"></div>

无论您在何处配置路线：

$routeProvider
    .when('/wizard', {templateURL: 'view/wizard.html'})
    .when('/wizard/:page', {templateURL: 'view/wizard.html'});

您的网址类似于：www.example.com/wizard/one

这将允许您继续使用部分（将加载到您的ng-includes中）

如何基于$ rootScope变量值实现路由

2 个答案: