指令和控制器之间的通信angularjs

Question

我想知道当电子邮件已经存在时是否可以向用户发送某种错误消息。我有这样的指令。 :

(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);
                });
            };
        }
    };
    }
}());

如您所见，returns 在控制台中显示错误。但是是否可以将此值传递给寄存器控制器？并将值设置为 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>

Answer 1

您可以直接在您的视图中设置错误消息。绑定到 $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>

Answer 2

是的，您可以直接将错误消息显示到 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=='abc@xyz.com'){
                      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 = 'abc@xyz.com email is already in use ';
        vm.register = register;


        function register() {

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

        }

    }

希望这对您有所帮助。 .

指令和控制器之间的通信angularjs

Communication between directive and controller angularjs

controller

directive

angularjs