将 UI 路由器与模板 url 一起使用时获取"Transition Rejection"

Question

我有一个基本的angularjs(1.8.2(应用程序和最新版本的ui路由器(1.0.29(

该应用程序将加载并正常工作，但我在控制台中注意到，当我最初使用模板url进入一个状态(使用ui sref路由(时，我会收到以下错误：

​转换拒绝($id:0类型：2，消息：转换已被其他转换取代，详细信息：转换#2("home"｛｝->"page2"｛}(

只有当用户第一次进入具有模板url的状态时才会发生这种情况，之后就不会再有错误，应用程序也会继续工作。

此处演示

我在网上找到的所有信息都表明我在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>