Сегодня я попробовал свои силы при написании директивы в угловой форме только для того, чтобы сделать мою собственную проверку "проверка наличия этого письма".
Однако, когда директива запускается, она очищает область действия - отринув ее неопределенно, и у меня нет подсказки. отключение этой директивы заставляет мою область не потеряться, когда я пытаюсь отправить свою форму. Может ли кто-нибудь объяснить мне, почему это будет сделано?
мой 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>
мой угловой файл JS:
/* 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'];
Окружающая среда является метеоритной средой, однако у меня есть серьезные сомнения в том, что метеор приводит к тому, что моя область действия остается неопределенной в момент, когда директива срабатывает, чтобы проверить, существует ли электронная почта. У меня есть подозрения, что minimongo может быть задействован в этом вопросе (переменная SiteInterestShown
представляет собой набор коллекции манго в папке коллекций в корневом каталоге проекта)
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;
}
Проблема, с которой столкнулся этот сегмент кода, заключалась в том, что я называл resolve
как свойство, а не как метод. Я также удалил лишний код ($ timeout), поскольку я счел его ненужным, но не ошибочным - в этом примере. в тот момент, когда я вызвал решение(), когда обещание отсрочки было возвращено, угловой не отменил значение из моего объема, что было другим, что я неправильно понял. "$scope"
который был уничтожен, был не всей областью, но только переменная Scope, привязанная к элементу, поскольку она моделировалась, потому что resolve()
не вызывалась - и теория здесь, она автоматически вызывала reject()
которая отменяет значение,
Короче говоря - у меня есть доступ к моей переменной области снова :)