javascript - My unsaved changes directive needs to work for all forms with different names -

i have directive opens modal alert user of unsaved changes , need check form dirty different unknown names. have tried use scope access forms name , this have not been successfull. can access form name elem[0].name not carry form $dirty value.

<form class="form-inline" role="form" name="myformname" confirm-on-exit> cool form html </form>  app.directive('confirmonexit', ['modalservice', '$rootscope', '$stateparams', '$state', function (modalservice, $rootscope, $stateparms, $state) { return {     restrict: 'a',            link: function (scope, elem, attrs, formctrl) {          onroutechangeoff = $rootscope.$on('$statechangestart', routechange);          function routechange(event, newstate, newparams, fromstate, fromparams) {              if (scope.myformname.$dirty) {                 return;             }              event.preventdefault();             var modaloptions = {                 closebuttontext: 'no, i\'ll stay , save them.',                 actionbuttontext: 'yes, leave , ignore changes',                 headertext: 'unsaved changes',                 bodytext: 'you have unsaved changes. want leave page?'             };              modalservice.showmodal({}, modaloptions).then(function (result) {                  if (result) {                     onroutechangeoff(); //stop listening location changes                     $state.go(newstate); //go page they're interested in                 } else {                      $state.go(fromstate); //stay on page , have tab revert fromstate                 }             });              return;         }     } };  }]); 

i suggest creating service observing route changes register forms want spy on. registration of form handled directive.

i put code below:

app.directive('confirmonexit', function (formchanges) {     return {         restrict: 'a',                link: function (scope, elem, attrs, formctrl) {             formchanges.register(scope, attrs.name);         }     }; }]);  app.factory('formchanges', function (modalservice, $rootscope, $state) {     var formnames = [];     var dirtycallbacks = {};      $rootscope.$on('$statechangestart', function (event, newstate, newparams, fromstate, fromparams) {         var hasdirtyform = false;          // check registered forms if of them dirty         (var = 0; < formnames.length; i++) {             var name = formnames[i];             if (dirtycallbacks[name] && dirtycallbacks[name]()) {                 // got dirty form!                 hasdirtyform = true;                 break;             }         }          if (!hasdirtyform) {             // nothing dirty, can continue             return;         }          // dirty, show modal         event.preventdefault();         var modaloptions = {             closebuttontext: 'no, i\'ll stay , save them.',             actionbuttontext: 'yes, leave , ignore changes',             headertext: 'unsaved changes',             bodytext: 'you have unsaved changes. want leave page?'         };          modalservice.showmodal({}, modaloptions).then(function (result) {             if (result) {                 // clear current forms                 formnames = [];                 dirtycallbacks = {};                 $state.go(newstate, newparams); //go page they're interested in             } else {                 $state.go(fromstate, fromparams); //stay on page , have tab revert fromstate             }         });          return;     });      $rootscope.$on('$statechangesuccess', function () {         // sure clear registered forms when change successful         formnames = [];         dirtycallbacks = {};     });      var service = {         // register form giving scope it's contained in , name         register: function (scope, name) {             scope.$on('$destroy', function () {                 // e.g. ng-if may destroy scope, make sure remove form again                 service.remove(name);             });             formnames.push(name);             dirtycallbacks[name] = function () {                 return scope[name].$dirty;             };         },          remove: function (name) {             delete dirtycallbacks[name];         }     };      return service; }); 

i wasn't able test it, may contain small errors - let me know , check. note code not minification save!