javascript - angular ui router - 必须点击两次才能按预期更新 View (带演示)

Question

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

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

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

对于 SO 引用:

应用程序.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.

Answer 1

我们应该做的是反转状态定义:

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

为什么？

because the question state definition is covering also the /results as a param /:questionID

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

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