<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ui-router transitionTo bug</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-router/818b0d69d2063064ca6d2e3b05252200439862d3/release/angular-ui-router.js"></script>
<script>
/**
* my custom build have the bug fixed
* replace ui-router script src with
*
* //pc035860.github.io/ui-router/build/angular-ui-router.min.js
*/
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="nav-container">
<ul class="nav nav-tabs">
<li ng-class="{'active': $state.includes('route1')}">
<a href="" ng-click="$state.transitionTo('route1', {d: 4, e: 5, f: 6}, false)">Route1</a>
</li>
<li ng-class="{'active': $state.includes('route2')}">
<a href="" ng-click="$state.transitionTo('route2', {a: 3, b: 2, c: 1}, false)">Route2</a>
</li>
<li ng-class="{'active': $state.includes('route1c')}">
<a href="" ng-click="$state.transitionTo('route1c', {d: 14, e: 15, f: 16}, {location: false})">Route1 (correct)</a>
</li>
<li ng-class="{'active': $state.includes('route2c')}">
<a href="" ng-click="$state.transitionTo('route2c', {a: 13, b: 12, c: 11}, {location: false})">Route2 (correct)</a>
</li>
</ul>
</div>
<div ui-view style="min-height: 300px;"></div>
<hr>
<div class="inspect">
<h3>location change log:</h3>
<pre>{{ locationChgLog }}</pre>
</div>
</div>
</body>
</html>
<div class="route">
<h2>{{ $state.current.data.routeName }}</h2>
<p ng-show="!$state.current.data.correct">
Switch between <code>Route1</code> and <code>Route2</code> with <code>$state.transitionTo('state', {}, false)</code> still causes location to change.
</p>
<p ng-show="$state.current.data.correct">
The correct version uses <code>$state.transitionTo('state', {}, {location: false})</code> demostrating the correct behavior - no location change.
</p>
<p> </p>
<h4>Parameters:</h4>
<pre>{{ params }}</pre>
</div>
angular.module('myApp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/route1');
$stateProvider
.state('route1', {
url: '/route1?d&e&f',
templateUrl: 'route.html',
data: {
routeName: 'Route1',
correct: false
}
})
.state('route1c', {
url: '/route1?d&e&f',
templateUrl: 'route.html',
data: {
routeName: 'Route1 (correct)',
correct: true
}
})
.state('route2', {
url: '/route2?a&b&c',
templateUrl: 'route.html',
data: {
routeName: 'Route2',
correct: false
}
})
.state('route2c', {
url: '/route2?a&b&c',
templateUrl: 'route.html',
data: {
routeName: 'Route2 (correct)',
correct: true
}
});
})
.run(function ($rootScope, $state) {
$rootScope.$state = $state;
})
.controller('MainCtrl', function ($scope, $stateParams, $log) {
$scope.locationChgLog = '';
$scope.$stateParams = $stateParams;
$scope.$watch('$stateParams', function(newValue, oldValue) {
$scope.params = JSON.stringify(newValue, null, 2);
}, true);
$scope.$on('$stateChangeStart', function () {
$scope.locationChgLog = '';
});
$scope.$on('$locationChangeSuccess', function () {
var args = Array.prototype.slice.call(arguments);
$scope.locationChgLog += (JSON.stringify({
time: (new Date()).getTime(),
from: args[2],
to: args[1]
}, null, 2) + '\n\n');
});
});