Question

我正在开发一个两页的AngularJS应用程序，用户必须先完成第一页才能进入第二页。

我的$ routeProvider设置如下：

$routeProvider.
        when('/config', {templateUrl: 'views/config.html', controller: ConfigController}).
        when('/levels', {templateUrl: 'views/levels.html', controller: LevelsController}).
        otherwise({redirectTo: '/config'});

因此用户最初被发送到Config页面，在填写一些字段后，他们按下一个按钮并进入Levels页面。问题是，如果他们在Levels页面上刷新页面，我需要将它们带回Config页面再次填写字段，然后才能返回Levels页面。

有没有办法实现这个目标？

Answer 1

您可以做的是在主控制器中创建一个范围变量，然后检查该变量是否已初始化。

angular.module('MyApp', [], function($routeProvider) {
$routeProvider.
        when('/config', {templateUrl: 'views/config.html', controller: ConfigController}).
        when('/levels', {templateUrl: 'views/levels.html', controller: LevelsController}).
        otherwise({redirectTo: '/config'});
});

function MainCntl($scope) {
  $scope.hasConfig = false;
}

function ConfigController($scope, $location) {
  // they press a button and are taken to the Levels page
  $scope.onSubmit = function () {
    $scope.hasConfig = true;
    $location.path('/levels');
  }
}

function LevelsController($scope, $location) {
  if($scope.hasConfig) {
    $location.path('/config');
  } else {
    //Stay on page
  }
}

你的html可能是：

<body ng-app="MyApp">
  <div ng-controller="MainCntl">
    <div ng-view></div>
  </div>
</body>

Answer 2

我有一个类似的用例：一个带有3个“页面”的向导式流程;用户填写第1个数据，然后确认第2个和第3个数据显示结果。

为内部“页面”添加书签是没有意义的：除非填写相关数据，否则用户必须始终被重定向到第一页。

我们解决这些问题的方法是不使用路由;一条路线包含ng-switch下的所有N页：

<div ng-switch="view.state">
    <div ng-switch-when="dataEntry">
        <div ng-include="..."></div>
    </div>
    <div ng-switch-when="confirmation">
        <div ng-include="..."></div>
    </div>
    <div ng-switch-when="outcome">
        <div ng-include="..."></div>
    </div>
</div>

在路线的控制器中：

angular.extend($scope, {
    view: {
        state: "dataEntry",
        ....
    },
    ....
});

因此，无论何时激活此控制器，用户都将看到“dataEntry”屏幕。结合一些奇特的动画，可以解决问题。

ng-include的替代方案是每个内页的指令。

我现在没有代码，但我认为HTML可以缩写为：

<div ng-switch="view.state">
    <div ng-switch-when="dataEntry" ng-include="..."></div>
    <div ng-switch-when="confirmation" ng-include="..."></div>
    <div ng-switch-when="outcome" ng-include="..."></div>
</div>

首次加载时和刷新后重定向到页面

2 个答案: