Question

我是Angular的新手，只是掌握了AngularUI路由器框架。我有一个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
        }
    ];

});

基本上由于某些未知原因（对我而言），我必须点击结果＆＃39;第一次点击时，它出现在我眼中的链接两次。

有谁知道为什么会这样？

一个。

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',
    ...
})

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

1 个答案: