4

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

我的 $routeProvider 设置如下：

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

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

有什么办法可以做到这一点？

4

2 回答 2

2

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

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>
于 2013-09-15T10:09:46.853 回答
1

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

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

我们解决这些情况的方法是不使用路由；一个单一的路线包含所有 N 页面下ng-switch：

<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>
于 2013-09-15T10:11:26.903 回答