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覆蓋為param /:questionID

但總的來說，這仍然令人困惑，所以我會更多地區分網址，例如使用/question關鍵字

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