指令和控制器之間的通信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); 
       }); 
      }; 
     } 
    }; 
    } 
}()); 

正如你所看到的，這會在控制檯中返回Show error。但是可以將這個值傳遞給寄存器控制器嗎？並將值設置爲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

是的，你可以直接在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) 

     } 

    } 

希望這有助於。 。

Answer 2

您可以設置錯誤在您的視圖直接消息。綁定到$ 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>