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

Question

Today I tried my hand at writing a directive in angular purely for means to make my own "check if this email exists" validation.
However, when the directive runs, it clears out the scope - rendering it undefined and I have no cooking-clue why. disabling the directive causes my scope not to go lost when I try to submit my form. Can anyone Explain to me why it would do 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 is required.</p>
<p ng-show="userForm.emailAddress.$error.email && !userForm.emailAddress.$pristine" class=".input-error">Your email is in an invalid format.</p>
<p ng-show="userForm.emailAddress.$error.emailExists && !userForm.emailAddress.$pristine" class=".input-error">This email already 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 from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
/* templates */
import template from './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 is a meteor environment, however I have severe doubts that meteor is causing my scope to go undefined at the point the directive fires off to validate whether or not the email exists. I have my suspicions that minimongo might be involved in this matter (SiteInterestShown variable is a mongo collection set in the collections folder on the root of the project)

Answer 1

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 was a method. called it as a method on validation success.
} else {
deferred.reject(); <-- reject would destroy the binding value and as far as I see, it gets auto-called if resolve() isn't fired.
}
return deferred.promise;
}
The issue that this code segment faced was that I called resolve as a property, not as a method. I also removed some extra code (the $timeout) as I deemed it unnecessary - but not incorrect - in this sample. the moment I called resolve(), when the deferral's promise was returned, angular did not scrap the value from my $scope - which was another thing I misunderstood. the "$scope" that was destroyed wasn't the entire scope, but only the Scope variable bound to the element as it's model because resolve() wasn't called - and theory here, it auto called reject() which scrapped the value.
Long story short - I have access to my scope variable again :)