angularjs - Directive causing $scope to go undefined when it fires off -

today tried hand @ writing directive in angular purely means make own "check if email exists" validation.

however, when directive runs, clears out scope - rendering undefined , have no cooking-clue why. disabling directive causes scope not go lost when try submit form. can explain me why this?

my html:

<form class='form-horizontal' name="userform" novalidate>     <div class='form-group' ng-class="{ 'has-error' : userform.emailaddress.$invalid && !userform.emailaddress.$pristine }">         <div class="col-sm-3">           <label class="control-label" for='emailaddress'>email address: </label>         </div>         <div class="col-sm-6">           <input class='form-control' type='email' id='emailaddress' name='emailaddress' ng-model='letmeknowemail' email-exists required/>           <p ng-show="userform.emailaddress.$error.required && !userform.emailaddress.$pristine" class=".input-error">your email required.</p>           <p ng-show="userform.emailaddress.$error.email && !userform.emailaddress.$pristine" class=".input-error">your email in invalid format.</p>           <p ng-show="userform.emailaddress.$error.emailexists && !userform.emailaddress.$pristine" class=".input-error">this email exists.</p>         </div>         <div class="col-sm-3">           <button class='btn btn-theme' ng-disabled="userform.$invalid" ng-click='userform.$invalid || addemail(letmeknowemail)'>let me know!</button>         </div>     </div> </form> 

my angular js file:

/* dependancies */ import angular 'angular'; import angularmeteor 'angular-meteor'; import uirouter 'angular-ui-router';  /* templates */ import template './applicationprocesstemp.html';  class applicationprocesstempctrl {   constructor($scope, $reactive) {     $reactive(this).attach($scope);     $scope.letmeknowemail = '';     $scope.addemail = function(letmeknowemail) {       if (this.userform.$valid) {         siteinterestshown.insert({           email: letmeknowemail         });       }     }   } }  const name = 'applicationprocesstemp'; applicationprocesstempctrl.$inject = ['$scope', '$reactive'];  export default angular.module(name, [     angularmeteor   ]).component(name, {     template,     controlleras: name,       controller: applicationprocesstempctrl   }).config(config)   .directive('emailexists', directive);  function config($stateprovider) {   'nginject';    $stateprovider.state('applicationtemp', {     url: '/applicationtemp',     template: '<application-process-temp></application-process-temp>'   }); }  config.$inject = ['$stateprovider'];  function directive($timeout, $q) {   return {     restrict: 'ae',     require: 'ngmodel',     link: function(scope, elm, attr, model) {       model.$asyncvalidators.emailexists = function() {         var defer = $q.defer();         $timeout(function() {           var exists = siteinterestshown.findone({             'email': model.$viewvalue           }) == undefined;           model.$setvalidity('emailexists', exists);           defer.resolve;         }, 1);         return defer.promise;       }     }   } }  directive.$inject = ['$timeout', '$q']; 

the environment meteor environment, have severe doubts meteor causing scope go undefined at point directive fires off validate whether or not email exists. have suspicions minimongo might involved in matter (siteinterestshown variable mongo collection set in collections folder on root of project)

model.$asyncvalidators.emailexists = function(modelvalue, viewvalue) {         var deferred = $q.defer();         var value = modelvalue || viewvalue;          var checkval = model.$viewvalue;         var exists = siteinterestshown.findone({           'email': value         }) != undefined;          if (!exists) {           deferred.resolve(); <-- resolve method. called method on validation success.         } else {           deferred.reject();  <-- reject destroy binding value , far see, gets auto-called if resolve() isn't fired.         }          return deferred.promise; } 

the issue code segment faced called resolve property, not method. removed code (the $timeout) deemed unnecessary - not incorrect - in sample. moment called resolve(), when deferral's promise returned, angular did not scrap value $scope - thing misunderstood. "$scope" destroyed wasn't entire scope, scope variable bound element it's model because resolve() wasn't called - , theory here, auto called reject() scrapped value.

long story short - have access scope variable again :)