<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.3.17/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.6.1/angular-translate.js"></script>
<script src="unsavedChanges.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
angular.module('app', [
'pascalprecht.translate',
'unsavedChanges',
'ui.router'
]).config(function($stateProvider, $urlRouterProvider, $translateProvider, unsavedWarningsConfigProvider) {
//
// For any unmatched url, redirect to /state1
//
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
//
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.view.html"
})
.state('state2', {
url: "/state2",
templateUrl: "state2.view.html"
});
//
// Translations
//
$translateProvider.translations('en', {
RELOAD: 'This is the reload message',
NAVIGATE: 'This is the navigate message.'
});
$translateProvider.translations('it', {
RELOAD: 'This is the italian reload message',
NAVIGATE: 'This is the italian navigate message.'
});
//
// Set default language
//
$translateProvider.preferredLanguage('en');
//
// Set up unsavedChanges messages
//
// define the translate key for the navigate message
unsavedWarningsConfigProvider.navigateMessage = 'NAVIGATE';
// define the translate key for the reload message
unsavedWarningsConfigProvider.reloadMessage = 'RELOAD';
});
/* Styles go here */
# Demo
Shows how to use angular-unsavedChanges with angular-translate
"use strict";angular.module("unsavedChanges",["resettable"]).provider("unsavedWarningsConfig",function(){var f=this;var e=false;var b=true;var d=["$locationChangeStart","$stateChangeStart"];var c="You will lose unsaved changes if you leave this page";var a="You will lose unsaved changes if you reload this page";Object.defineProperty(f,"navigateMessage",{get:function(){return c},set:function(g){c=g}});Object.defineProperty(f,"reloadMessage",{get:function(){return a},set:function(g){a=g}});Object.defineProperty(f,"useTranslateService",{get:function(){return b},set:function(g){b=!!(g)}});Object.defineProperty(f,"routeEvent",{get:function(){return d},set:function(g){if(typeof g==="string"){g=[g]}d=g}});Object.defineProperty(f,"logEnabled",{get:function(){return e},set:function(g){e=!!(g)}});this.$get=["$injector",function(h){function i(j){if(h.has("$translate")&&b){return h.get("$translate").instant(j)}else{return false}}var g={log:function(){if(console.log&&e&&arguments.length){var j=[].slice.call(arguments);if(typeof console.log==="object"){log.apply.call(console.log,console,j)}else{console.log.apply(console,j)}}}};Object.defineProperty(g,"useTranslateService",{get:function(){return b}});Object.defineProperty(g,"reloadMessage",{get:function(){return i(a)||a}});Object.defineProperty(g,"navigateMessage",{get:function(){return i(c)||c}});Object.defineProperty(g,"routeEvent",{get:function(){return d}});Object.defineProperty(g,"logEnabled",{get:function(){return e}});return g}]}).service("unsavedWarningSharedService",["$rootScope","unsavedWarningsConfig","$injector","$window",function(j,c,k,d){var i=this;var a=[];var g=true;var e=[];this.allForms=function(){return a};function h(){g=true;angular.forEach(a,function(m,l){c.log("Form : "+m.$name+" dirty : "+m.$dirty);if(m.$dirty){g=false}});return g}this.init=function(l){if(a.length===0){f()}c.log("Registering form",l);a.push(l)};this.removeForm=function(m){var l=a.indexOf(m);if(l===-1){return}a.splice(l,1);c.log("Removing form from watch list",m);if(a.length===0){b()}};function b(){c.log("No more forms, tearing down");angular.forEach(e,function(l){l()});e=[];d.onbeforeunload=null}this.confirmExit=function(){if(!h()){return c.reloadMessage}j.$broadcast("resetResettables");b()};function f(){c.log("Setting up");d.onbeforeunload=i.confirmExit;var l=c.routeEvent;angular.forEach(l,function(m){var n=j.$on(m,function(p,o,q){c.log("user is moving with "+m);if(!h()){c.log("a form is dirty");if(!confirm(c.navigateMessage)){c.log("user wants to cancel leaving");p.preventDefault()}else{c.log("user doesn't care about loosing stuff");j.$broadcast("resetResettables")}}else{c.log("all forms are clean")}});e.push(n)})}}]).directive("unsavedWarningClear",["unsavedWarningSharedService",function(a){return{scope:{},require:"^form",priority:10,link:function(d,c,b,e){c.bind("click",function(f){e.$setPristine()})}}}]).directive("unsavedWarningForm",["unsavedWarningSharedService","$rootScope",function(b,a){return{scope:{},require:"^form",link:function(e,d,c,g){var f=0;while(d[0].tagName!=="FORM"&&f<3){f++;d=d.parent()}if(f>=3){throw ("unsavedWarningForm must be inside a form element")}b.init(g);d.bind("submit",function(h){if(g.$valid){g.$setPristine()}});d.bind("reset",function(h){h.preventDefault();var i=angular.element(d[0].querySelector("[resettable]"));if(i.length){e.$apply(i.triggerHandler("resetResettables"))}g.$setPristine()});e.$on("$destroy",function(){b.removeForm(g)})}}}]);angular.module("resettable",[]).directive("resettable",["$parse","$compile","$rootScope",function(d,c,b){return{restrict:"A",link:function a(m,g,j,e){var h,k,l;j.$observe("ngModel",function(n){k=d(j.ngModel);h=k.assign;l=k(m)});var i=function(){h(m,l)};g.on("resetResettables",i);var f=m.$on("resetResettables",i);m.$on("$destroy",f)}}}]);
<h1>Form</h1>
<p>Change the value and then <a ui-sref="state2">click here to change state</a></p>
<form name="testForm" unsaved-warning-form>
<input name="test" type="text" ng-model="test"/>
</form>
<h1>Page</h1>
<a ui-sref="state1">Return to form</a>