Last active
August 29, 2015 14:24
-
-
Save maxkoretskyi/89e8a8c7876671fbd893 to your computer and use it in GitHub Desktop.
event.preventDefault() on `$stateChangeStart` together with '$urlRouterProvider.when("/", "/home")' causes infinite digest loop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> | |
| <script src="https://code.jquery.com/jquery-2.1.4.js"></script> | |
| <script> | |
| // 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) { | |
| $stateProvider.state({ name: 'home', url: '/home', controller: function() { }, templateUrl: 'home.html'}); | |
| $stateProvider.state({ name: 'home.foo', url: '/foo', controller: function() { }, templateUrl: 'foo.html'}); | |
| $urlRouterProvider.when("/", "/home"); | |
| }); | |
| // Adds state change hooks; logs to console. | |
| app.run(function($rootScope, $state, $location, $urlRouter, $timeout, $templateCache) { | |
| $templateCache.put("home.html","<h1>home state loaded</h1>"); | |
| $rootScope.$state = $state; | |
| $rootScope.$location = $location; | |
| function message(to, toP, from, fromP) { | |
| return from.name + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP); | |
| } | |
| var userResolved = false; | |
| var timeoutSet = false; | |
| $rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) { | |
| console.log("Start: " + message(to, toP, from, fromP)); | |
| if (!userResolved) { | |
| console.log("preventing event"); | |
| evt.preventDefault(); | |
| if (!timeoutSet) { | |
| $timeout(function(){ | |
| userResolved = true; | |
| $urlRouter.sync(); | |
| }, 1000); | |
| timeoutSet = true; | |
| } | |
| } | |
| }); | |
| $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); }); | |
| }); | |
| </script> | |
| </head> | |
| <body ng-app="demonstrateissue"> | |
| <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: | |
| <select ng-model="foo" ng-change="$state.go(foo); foo = '';" | |
| ng-options="state as state.name for state in $state.get()"> | |
| <option value="">Choose a state</option> | |
| </select> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment