angular ui router - 必须单击两次才能按预期更新视图(使用demo)

Question

我是Angular的新手,只是掌握了AngularUI Router框架.我有一个html页面,其中包含一个问题列表(每个问题都需要自己的URL)和一个结果页面.

我创建了一个快速剥离的plunker(包含所有文件)来演示问题:

http://plnkr.co/edit/QErnkddmWB0JgendbOiV?p=preview

对于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
        }
    ];

});

基本上由于某些未知原因(对我而言),我必须单击两次" 结果 "链接才能在第一次点击时出现在我眼中.

有谁知道为什么会这样？

一个.

Answer 1

我们应该做的是扭转国家的定义:

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

之所以？

因为问题状态定义也涵盖了/results 作为一个参数/:questionID

但总的来说,这仍然令人困惑,所以我会更多地区分网址,例如使用/question关键字

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