javascript - prevent redirect behaviour in angularjs app -

javascript - prevent redirect behaviour in angularjs app -

when user tries click browser button , dere dirty info on form, shows confirmation.

here angular js controller code

function myctrl2($rootscope, $location, $scope) { $rootscope.$watch(function () { homecoming $location.path(); }, function (newvalue, oldvalue) { if ($scope.myform.$dirty) { var = confirm('do you'); if (!a) { //how prevent redirect } } }, true); } myctrl2.$inject = ['$rootscope', '$location', '$scope'];

but how prevent redirect on

there 2 dom events @ root of whole problem you're trying solve: onhashchange , onbeforeunload. onhashchange can checked , prevented, however, button on browser not trigger onhashchange. what's worse, onbeforeunload not trigger if page doesn't reload, means if nail go previous hash on page, not fire. because of this, if press to go previous route still leave form.

there oustanding issue on angular's todo list how they're going allow cancellation of route. i'd presume button hash issue what's hold them @ point.

so in end may want re-engineer solution little more drastic if want prevent navigation away form 1 time it's been edited. storing of info form editing in $rootscope, along flag show it's dirty incomplete, add together event handler routechangestart checks values , sends form.

here's how work (and plunker if you're interested):

app.config(function($routeprovider) { //set routes. (important because we're going navigate // them.) $routeprovider.when('/form', { controller: 'formctrl', templateurl: 'form.html' }).otherwise({ controller: 'homectrl', template: '<h3>home</h3>' }); }); app.run(function($rootscope, $location){ //set rootscope formdata object. $rootscope.formdata = {}; //add routing event check route // , whether or not info has been editted , // send proper form. $rootscope.$on('$routechangestart', function() { if($location.path() != '/form' && $rootscope.formdata.dirty && !$rootscope.formdata.complete && !confirm('do want leave form?')) { $location.path('/form'); } }); //handle outright navigating away page. $(window).on('beforeunload', function() { if($rootscope.formdata.dirty && !$rootscope.formdata.complete) { homecoming 'are sure want navigate away form?'; } }); }); app.controller('formctrl', function($scope) { $scope.$watch(function (){ homecoming $scope.myform.$dirty; }, function(dirty) { $scope.formdata.dirty = $scope.formdata.dirty | dirty; }) });

other thoughts

initially had developed directive help this, realized wouldn't work because of issues mentioned above. regardless, posterity's sake, here is:

app.directive('form', function ($window){ homecoming { restrict: 'e', link: function(scope, elem, attrs) { //check prevent-if-dirty attribute on form tag if(attrs.preventifdirty !== undefined) { // first off, stop routing hash changes // changing page. scope.$on('$locationchangestart', function(event) { if(scope.testform.$dirty) { event.preventdefault(); } }); // little setup our next piece var formname = attrs.name; function showwarning() { homecoming 'you have changed form'; } // stop browser navigation moving away // dirty form. scope.$watch(function (){ homecoming scope[formname].$dirty; }, function(dirty) { if(dirty) { $(window).on('beforeunload', showwarning); } else { $(window).off('beforeunload', showwarning); } }); } } }; });

here's plunker demonstrating it.

javascript angularjs angularjs-directive