<!DOCTYPE html>
<html>
<head>
<script src="//unpkg.com/show-current-browser-url"></script>
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-ui-router@latest/release/angular-ui-router.js"></script>
<script src="_main.js"></script>
<script src="z_extras.js"></script>
<link rel="stylesheet" href="styles.css" />
<title>Plunk demonstrating ui-router issue</title>
</head>
<body ng-app="demonstrateissue">
<ul>
<li>
Links with <code>{ location: 'replace' }</code>
<ul>
<button ui-sref="a" ui-sref-opts="{ location: 'replace' }">a state</button>
<button ui-sref="b" ui-sref-opts="{ location: 'replace' }">b state</button>
<button ui-sref="c" ui-sref-opts="{ location: 'replace' }">c state</button>
</ul>
</li>
<li>
Links without <code>{ location: 'replace' }</code>
<ul>
<button ui-sref="a" ui-sref-opts="{ }">a state</button>
<button ui-sref="b" ui-sref-opts="{ }">b state</button>
<button ui-sref="c" ui-sref-opts="{ }">c state</button>
</ul>
</li>
</ul>
<button href="javascript: void(0)" onclick="window.history.back()">Back button</button>
<div ui-view>ui-view not populated</div>
<div class="header">
Current URL: <b>{{$location.url() }}</b> <br>
Current State: <b>{{$state.current.name }}</b> <br>
Current Params: <b>{{$state.params | json }}</b><br>
Go to state: <state-selector></state-selector>
</div>
</body>
</html>
"use babel";
// Here's a skeleton app. Fork this plunk, or create your own from scratch.
var app = angular.module('demonstrateissue', ['ui.router']);
// Empty config block. Define your example states here.
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/a')
$stateProvider.state({
name: 'a',
url: '/a',
template: '<h1>a</h1>'
});
$stateProvider.state({
name: 'b',
url: '/b',
template: '<h1>b</h1>'
});
$stateProvider.state({
name: 'c',
url: '/c',
template: '<h1>c</h1>'
});
});
console.log("Scripts loading... ");
body {
margin-top: 7em;
}
.link {
text-decoration: underline;
color: blue;
}
.link:hover {
cursor: pointer;
}
.header {
position: fixed;
right: 0;
top: 1.5em;
height: 6em;
width: 100%;
border-bottom: 1px solid gray;
}
<h1>foo state loaded</h1>
<div ui-view></div>
# PlunkrPlease
----
#### Please create a Plunk which demonstrates the UI-Router issue you are reporting.
Here's how:
- Fork this plunk by clicking "Fork" in the toolbar above.
- This base plunk contains a minimal UI-Router application, which contains two states 'home' and 'home.foo'.
- You do not need to keep these states, nor any of the other boilerplate, if you do not need it.
- Add any JS dependencies by adding <script> tags to the index.html file.
- Add code to main.js and index.html which demonstrates the issue you are reporting.
- The demonstration should be the minimal amount of code that will reproducible the issue.
- Add any additional files as needed to demonstrate the issue.
- Link back to your plunkr URL in the UI-Router github issue.
<h1>home state loaded</h1>
<a ui-state="target.name" ui-state-params="target.params">{{target.description}}</a>
<div ui-view></div>
// Adds state change hooks; logs to console.
app.run(function($rootScope, $state, $location) {
$rootScope.$state = $state;
$rootScope.$location = $location;
function message(to, toP, from, fromP) {
return from.name + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP);
}
$rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) { console.log("Start: " + message(to, toP, from, fromP)); });
$rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log("Success: " + message(to, toP, from, fromP)); });
$rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) { console.log("Error: " + message(to, toP, from, fromP), err); });
});
app.directive("stateSelector", function() {
return {
restrict: "E",
template: ' <select ng-model="ctrl.currentstate" ng-change="ctrl.$state.go(ctrl.currentstate);" ' +
' ng-options="state as state.name for state in ctrl.$state.get()">' +
' <option value="">Choose a state</option>' +
' </select>',
controller: function($scope, $state) {
var ctrl = this;
ctrl.$state = $state;
ctrl.currentstate = $state.current;
$scope.$on("$stateChangeSuccess", function(evt, to) {
ctrl.currentstate = $state.current
});
},
controllerAs: "ctrl"
}
});