Javascript angular ui路由器-必须单击两次才能按预期更新视图（带演示）

我是AngularUI路由器框架的新手，刚开始接触AngularUI路由器框架。我有一个html页面，其中包含一个问题列表（每个问题都需要自己的url）和一个结果页面

我已经创建了一个快速剥离plunker（包含所有文件）来演示该问题：

关于SO ref：

app.js

angular.module('foo', ['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/q1');

    $stateProvider

    .state('question', {
        url: '/:questionID',
        templateUrl: 'questions.html',
        controller: 'questionsCtrl'
    })

    .state('results', {
        url: '/results',
        templateUrl: 'results.html'
    })

})

.controller('questionsCtrl', function($scope, $stateParams) {

    $scope.questionID = $stateParams.questionID;
    $scope.scotches = [
        {
            name: 'Macallan 12',
            price: 50
        },
        {
            name: 'Chivas Regal Royal Salute',
            price: 10000
        }
    ];

});

基本上，由于某种未知的原因（对我来说），我必须单击两次“结果””链接，它才会出现在我的眼睛中，并且应该在第一次单击时出现

有人知道为什么会这样吗

---

A.

我们应该做的是颠倒状态定义：

.state('results', {
    url: '/results',
    templateUrl: 'results.html'
})
.state('question', {
    url: '/:questionID',
    templateUrl: 'questions.html',
    controller: 'questionsCtrl'
})

原因是什么

因为问题状态定义也将

/results

作为参数

/：questionID

但总的来说，这仍然令人困惑，因此我会更多地区分url，例如使用

/question

关键字

.state('results', {
    url: '/results',
})
.state('question', {
    url: '/question/:questionID',
    ...
})