使用带有模板 url 的 ui 路由器时获取 "Transition Rejection"

Question

我有一个基本的 angularjs (1.8.2) 应用程序，其中包含最新版本的 ui 路由器 (1.0.29)。

该应用程序将加载并正常工作，但我注意到在控制台中，当我最初使用模板 [=41= 进入状态（使用 ui-sref 路由）时出现以下错误]:

Transition Rejection($id: 0 type: 2, message: transition has been supplied by a different transition, detail: Transition#2( 'home'{} -> 'page2'{ } ))

它只会在用户第一次进入模板状态时发生 url，此后不再有错误，应用程序继续工作。

Demo Here

我在网上找到的所有信息都说 ui 路由器存在配置错误，但我找到的所有文档都表明这应该可以正常工作。

感谢任何帮助，谢谢。

var app = angular.module('plunker', ['ui.router', 'editor']);

// routing configuration
app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {

    // default route
    $urlRouterProvider.otherwise('/');

    // available states
    var states = [
        {
            name: 'home',
            url: '/',
            template: '<div><h3>HOME PAGE</h3></div>'
        },
            {
            name: 'page2',
            url: '/page2',
            controller: 'page2Ctrl',
            templateUrl: 'page2.html',
        },
            {
            name: 'page3',
            url: '/page3',
            controller: 'page3Ctrl',
            templateUrl: 'page3.html',
        }
    ];

    // Loop over the state definitions and register them
    states.forEach(function (state) {
        $stateProvider.state(state);
    });
}]);

app.controller('mainCtrl', function($scope) {
  $scope.content = 'World';
});

app.controller('page2Ctrl', function($scope) {
  $scope.hasLoaded = true;
});

app.controller('page3Ctrl', function($scope) {
  $scope.hasLoaded = true;
});

Answer 1

错误是因为每个州有 2 个 ui-sref。从 li 元素中删除一个，它工作正常：

<li role="presentation" ui-sref-active="active">
   <a ui-sref="home" ui-sref-opts="{reload: true, inherit: false}">
   Home
   </a>
</li>

使用带有模板 url 的 ui 路由器时获取 "Transition Rejection"

Getting a "Transition Rejection" when using ui router with template url

angularjs

angular-ui-router