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

angular ui router - having to click twice for view to update as expected (with demo)

本文关键字：更新 新视图 两次 ui angular 路由器      更新时间：2023-09-26

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

我已经创建了一个快速精简的plunker（与所有文件）来演示这个问题：

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

SO参考：

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',
    ...
})
相关文章：