Директива, заставляющая $ scope оставаться неопределенной при запуске

Question

Директива, заставляющая $ scope оставаться неопределенной при запуске

0

Сегодня я попробовал свои силы при написании директивы в угловой форме только для того, чтобы сделать мою собственную проверку "проверка наличия этого письма".

Однако, когда директива запускается, она очищает область действия - отринув ее неопределенно, и у меня нет подсказки. отключение этой директивы заставляет мою область не потеряться, когда я пытаюсь отправить свою форму. Может ли кто-нибудь объяснить мне, почему это будет сделано?

мой 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 представляет собой набор коллекции манго в папке коллекций в корневом каталоге проекта)

Eon 07 сен. 2016, в 16:22

Источник

0

единственная переменная, которую я удаленно касаюсь в директиве, - это модель. $ viewValue - доступ к ней может привести к тому, что $ scope станет неопределенным после нажатия кнопки, а функция $ scope.addEmail () будет отключена (и почему Функция запускается, если $ scope ПРЕДПОЛАГАЕТСЯ быть неопределенным. Сейчас я сижу с большим количеством вопросов)
Eon 07 сен. 2016, в 13:49

Теги:

angularjs

mongodb

angular-meteor

1 ответ

Ещё вопросы

единственная переменная, которую я удаленно касаюсь в директиве, - это модель. $ viewValue - доступ к ней может привести к тому, что $ scope станет неопределенным после нажатия кнопки, а функция $ scope.addEmail () будет отключена (и почему Функция запускается, если $ scope ПРЕДПОЛАГАЕТСЯ быть неопределенным. Сейчас я сижу с большим количеством вопросов)

Eon · Answer 1 · 2016-09-08T05-37-00.000Z

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() которая отменяет значение,

Короче говоря - у меня есть доступ к моей переменной области снова :)