Связь между директивой и контроллером angularjs

0

Я хотел бы знать, можно ли отправить пользователю какое-то сообщение об ошибке, когда почта уже существует. У меня есть такая директива. :

(function() {

    angular
        .module('app')
        .directive('emailNotUsed',emailNotUsed);

    emailNotUsed.$inject = ['$http', '$q'];

function emailNotUsed ($http, $q) {
    return {

        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.emailNotUsed = function(modelValue, viewValue) {
                return $http.post('/email',viewValue).then(function(response) {
                    console.log(response);
                    return response.data == true ? /*$q.reject(response.data.errorMessage)*/  console.log("Show Error Message"): true;

                   // console.log(response);
                });
            };
        }
    };
    }
}());

Как вы можете видеть, это возвращает Показать ошибку в консоли. Но можно ли передать это значение в контроллер регистров? И установите значение true или false?

(function () {
    'use strict';

    angular
        .module('app')
        .controller('RegisterController', RegisterController);

    RegisterController.$inject = ['UserService', '$http','$q' ];
    function RegisterController(UserService, $http,$q) {
        var vm = this;

        vm.register = register;


        function register() {

           vm.dataLoading = true;
           UserService.Create(vm.user)

        }

    }

})();

Или я могу дать сообщение об ошибке непосредственно в html.

<div class="container" ng-controller="RegisterController as vm">
    <div class="col-md-6 col-md-offset-3">

        <div ng-show="vm.error" class="alert alert-danger">{{vm.error}}</div>
        <form name="form" ng-submit="!form.$pending && form.$valid && vm.register()" role="form">




            <div>
                <label for="email">Email</label>
                <input type="text" name="email" id="email" class="form-control" ng-model="vm.user.email" email-not-used ng-model-options="{ debounce: 500 }" required  >
            </div>


            <div class="form-actions">
                <button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
                <a href="#/login" class="btn btn-link">Cancel</a>
            </div>
        </form>
    </div>
</div>

Мое решение

После многих проблем сегодня я нашел решение для своей проблемы.

Я изменил директиву emailNotUsed на emailValidator.

(function() {
    angular
        .module('app')
        .directive('emailValidator',emailValidator);

    emailValidator.$inject = ['$q', '$timeout','$http'];

    function emailValidator ($q, $timeout,$http){

        return {

            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {
                ngModel.$asyncValidators.email = function(modelValue, viewValue) {

                    var deferred = $q.defer();
                    DoesEmailExist()

                    function DoesEmailExist () {

                        $http.post('/email',viewValue).then(function(response) {

                            if (response.data==true) {
                                console.log('Email does exist')
                                deferred.reject();
                            }else {
                                deferred.resolve();
                            }
                        });

                    };

                    console.log(deferred.promise)
                    return deferred.promise;
                };
            }
        }


    }
}());

И в registration.html я добавил:

    <div class="form-group" ng-class="{ 'has-error': form.email.$dirty && form.email.$invalid }">

        <label for="email"> Email</label>
        <input type="text" ng-model="signup.email" ng-model-options="{ debounce: 500 }" name="email" id="email" class="form-control" required email-validator>


        <div  class="help-block" ng-messages="form.email.$error" ng-if="form.email.$dirty">
            <p ng-message="required">Your name is required.</p>
            <div ng-message="email" class="help-block" >email already in use</div>
        </div>
Теги:
controller
directive

2 ответа

0
Лучший ответ

Да, вы можете прямо показать сообщение об ошибке в HTML.

попробуй это,

В HTML,

<form name="form" ng-submit="!form.$pending && form.$valid && vm.register()" role="form">
            <div>
                <label for="email">Email</label>
                <input type="text" name="email" id="email" class="form-control" ng-model="vm.user.email" email-not-used ng-model-options="{ debounce: 500 }" required  >
                 <span ng-show="form.email.$invalid && form.email.$dirty">Email is already in use!</span>
                 <span ng-show="form.email.$valid && form.email.$dirty">Email available!</span>
            </div>


            <div class="form-actions">
                <button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Register</button>
                <a href="#/login" class="btn btn-link">Cancel</a>
            </div>
        </form>

В app.js,

var app = angular.module('app', []);



    app.directive('emailNotUsed',emailNotUsed);

    emailNotUsed.$inject = ['$http', '$q'];

function emailNotUsed ($http, $q) {
    return {

        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$asyncValidators.emailNotUsed = function(modelValue, viewValue) {
                  var data='';
                  if (viewValue=='[email protected]'){
                      ngModel.$setValidity('valid', false);
                       scope.form.email.$setValidity('email', false);

                  }else{
                       ngModel.$setValidity('valid', true);
                       scope.form.email.$setValidity('email', true);
                  }

                return data;
        }
    }
    }
}


    app.controller('RegisterController', RegisterController);

    RegisterController.$inject = ['$scope', '$http','$q' ];
    function RegisterController($scope, $http,$q) {
        var vm = this;
    $scope.name = '[email protected] email is already in use ';
        vm.register = register;


        function register() {

           vm.dataLoading = true;
           UserService.Create(vm.user)

        }

    }

Надеюсь это поможет. ,

  • 0
    Plunker link
  • 0
    Спасибо, но я уже нашел решение, я отмечу ваш ответ как правильный, потому что он наиболее близок к решению, которое я нашел.
0

Вы можете настроить сообщение об ошибке непосредственно в своем представлении. Привязать к $ scope.form.email.emailNotUsed.

<div>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" class="form-control" ng-model="vm.user.email" email-not-used ng-model-options="{ debounce: 500 }" required  >
    <span ng-show="form.email.emailNotUsed">Email is already in use!</span>
</div>
  • 0
    Нужно ли что-то изменить в директиве, потому что она не отображает сообщение об ошибке.
  • 0
    Это должно сработать. Может быть, что-то еще неправильно и не работает.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню