Question

I try to write prompt on change route into controller.

Code:

<a href="#/">Test</a>
<a href="#/Test2">Test2</a>
<hr/>

<div ng-app='app'>
    <pre>View:
        <ng-view></ng-view>
    </pre>

</div>

JS:

console.clear();

var app = angular.module("app",["ngRoute"]);

app.controller("Test1", function($rootScope){
    var $offFunction = $rootScope.$on("$locationChangeStart", function(e) {
      if (confirm("Are you sure")) return $offFunction();
      return e.preventDefault();
    });

})

app.config(function($routeProvider){
    var tmpl1 = "Show message when you try change route. Bug: \n1. Click to 'Test2'. On prompt click cancel."
    +"\n2. Click to Test2 again"
    +"\n3. There is no prompt message"
    +"\n <i>Only on IE</i>";
    $routeProvider
    .when("/", {template:tmpl1, controller: "Test1"})
    .when("/Test2", {template:"Test 2"})
})

Problem:

In IE11, IE10 if you click to Test2, check 'Cancel' and click to Test2 again - locationChangeStart don't called again. How to fix it?

IE9 all works fine

JSFiddle

Was it helpful?

Solution

The problem is caused by misplacing your a tags. They should be placed inside ng-app, as a not just tag, but angular directive. See corrected fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top