Question

好的，我知道标题有点含糊不清，但我想不出一个描述性的标题。我会在这里解释我的问题。

我有一些州设置如下：

$stateProvider.state('designer', {
    url: '/:sport/designer',
    abstract: true,
    templateUrl: '/app/designer/index.tpl.html',
    controller: 'DesignerController',
    controllerAs: 'controller'
}).state('designer.team', {
    url: '',
    templateUrl: '/app/designer/team.tpl.html'
}).state('designer.kit', {
    url: '/kit',
    templateUrl: '/app/designer/kit.tpl.html'
}).state('designer.design', {
    url: '/design',
    templateUrl: '/app/designer/design.tpl.html'
}).state('designer.refine', {
    url: '/refine',
    templateUrl: '/app/designer/refine.tpl.html'
}).state('designer.order', {
    url: '/order',
    templateUrl: '/app/designer/order.tpl.html'
}).state('designer.save', {
    url: '/save',
    templateUrl: '/app/designer/save.tpl.html',
    data: {
        requireLogin: true
    }
});

这个想法很简单，有一些步骤允许用户自定义工具包。当他们到达最后一步（保存）时，他们必须登录/注册才能保存（出于显而易见的原因）。所以我像这样构建我的控制器：

.controller('DesignerController', ['$stateParams', 'Api', 'Array', 'TemplateService', function ($stateParams, api, array, service) {
    var self = this,
        slug = $stateParams.sport;    

    // Empty model to handle the first time loading
    self.kit = {
        loading: false,
        data: {
            name: '',

            selectedGarments: [],
            selectedDesign: 'Angelus',
            total: '00.00',

            team: {
                name: '',
                clubName: '',
                sport: '',

                selectedColours: []
            }
        }
    };

    self.sport = api.get('/categories', { slug: slug }); // Get our sport
    self.colours = ['000000', 'FFFFFF', '00adef', 'ed008c', 'fef200', '2e3192', '00a652', 'ed1b24', 'c7c8ca', 'f14e23', '6c9d30', 'c0d731', 'f5a3c7', '816ab0', '082140', '1e4f2f', '5bcaf5', 'f04e3f', 'f68b1f', 'cdbe01', 'ee4d9b', '007193', '5f1e08', '841c3d']; // Get current colours
    self.designs = ['Angelus', 'Claudius', 'Equitius', 'Fang', 'Valerius']; // Get current designs
    self.garments = { loading: true }; // Empty object to be populated by service

    // After we get our sport, get our garments
    self.sport.promise.then(function () {

        // Get the category id
        var categoryId = self.sport.data[0].id;

        // Get all the garments that belong to that category
        self.garments = api.get('products', { categoryId: categoryId });
    });

    // Set our colours
    self.setColour = function (colour) {
        var colours = self.kit.data.team.selectedColours;

        array.modify(colours, colour);
    };

    // Set our design
    self.setDesign = function (design) {
        self.kit.data.selectedDesign = design;
    };

    // Set our garments
    self.setGarment = function (garment) {
        var garments = self.kit.data.selectedGarments;

        array.modify(garments, garment);
    };
}]);

现在，正如您所看到的那样， self.kit 对象几乎是空白的。每个状态处理视图模型的不同部分。

团队 - 处理所有团队成员
Kit - 处理服装选择
设计 - 处理所选设计
订单 - 不修改视图模型，但它使用所有以前的状态数据来显示信息
保存 - 是保存“套件”的时间

所以，我的问题是，如果先前的状态值尚未完成，那么无论如何都要阻止加载下一个状态？而且，您是否可以根据加载时已完成的值重定向到某个州（我计划在sessionStorage中持有工具包）？

Answer 1

您可以使用$stateChangeStart来阻止事件发生变化，但您也需要一些服务，例如某些＆＃34; DesignerWizardManager＆＃34;或类似的，你可以使用$ window.localStorage或类似的东西来保存状态。

angular.module('pcmacClientApp', [])
  .run(function($rootScope, DesignerStepManager) { 
    $rootScope.$on('$stateChangeStart',
      function(event, next, nextParams, prev, prevParams) {

        var canNavigateToStep = DesignerStepManager.canNavigateThrougth(next);

        if(!canNavigateToStep) {
          event.preventDefault();
       } else if(DesignerStepManager.hasProgress() {
           $rootScope.$state.go(DesignerStepManager.getCurrentStateName());
           //also you could add stateParams
       }
});

空白模型的角度状态重定向

1 个答案: