代码之家 › 专栏 › 技术社区 › Reyedy iniazz

角度ui路由器:隐藏参数和浏览器导航

angular-ui-router angularjs javascript

Reyedy iniazz · 技术社区 · 6 年前

我在和安格拉工作 UI-Router 在我的应用程序中导航。我正在努力实现一些“开箱即用”的东西 $stateParams 在我的一个州。

解释

这个州是一个测验,连续几个问题。定义如下:

$stateProvider
.state('myQuizz', {
   url:"/myQuizz/{title}",
   cache:false,
   params:{
     step: null
   },
   views: {
     'myQuizz-tab': {
       templateUrl: "myQuizz.html",
       controller: "myQuizzCtrl"
     }
   }
})

参数 title 显示在URL中,并定义用户当前正在进行的测验。例如: myapp.com/myquizz/history 是的。
参数 step 控制用户参加测验的哪个步骤(即哪个问题,例如10题中的第6题)。默认情况下,我的控制器将其设置为1,以便测验从第一个问题开始。

在测验控制器中,或多或少会发生以下情况:

$scope.submitAnswer = function(answer){
    if(isValid(answer, $stateParams.step)){ // If the answer was correct
        $stateParams.step = $stateParams.step + 1; // Increases step
        displayQuestion($stateParams.step); // Gets the next question in the quizz
    }
}

所以每次用户回答问题时,它都会更新$stateparams.step并刷新显示,以便出现下一个问题。

我要做的是

现在我想做的是 使用浏览器的按钮在步骤之间导航,使用户可以返回。 举个例子:

用户处于另一种状态,比如说测验菜单。 // state "menu"
用户打开一个测验。 // state "myQuizz", step = 1, 1st question is displayed
他们正确地回答了第一个问题,控制器更新$stateparams.step并显示第二个问题。 // step = 2, 2nd question is displayed
他们想回到第一个问题,所以他们按下浏览器的“后退”按钮。 // step = 1, 1st question is displayed

现在发生的事情是:当他们按下“后退”按钮,他们被带到上一个状态(“菜单”)。我怀疑这是因为当$stateparam.step被更新时,它不会更改url(因为这个参数是隐藏的)。

如果 $stateParams.step 是一个正常的参数(不是隐藏的),它可以工作 (我测试过)。但我不希望这个参数出现在url中,这就是诀窍所在。

我的问题

我的问题是: 在我的状态下,如何在只更改一个隐藏的$stateparam的情况下启用浏览器导航?

到目前为止我试过的

我试着加上

$state.go('myQuizz', {title: $stateParams.title, step: $stateParams.step+1});

使浏览器认为我改变了状态。没有成功。
我也试着用 $state.transitionTo ,结果相同。
最后,我尝试用$state.reload()刷新状态。这不起作用有两个原因:它将测验重新初始化到第一步,并重新加载所有图像(我在测验开始时预加载),因此这不是一个令人满意的方法。

0 回复 | 直到 6 年前