如何訪問元素屬性從AngularJS控制器

Question

我有如下HTML代碼：

<form ng-submit="login()" novalidate> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <input type="email" 
        class="input-large text-field-gra" 
        ng-model="email" 
        maxlength="50" 
        required 
        placeholder="<?php echo __('E-mail') ?>"/> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12"> 
      <input type="password" 
        class="input-large text-field-gra" 
        ng-model="password" 
        minlength="4" 
        maxlength="10" 
        required 
        placeholder="<?php echo __('Senha') ?>"/> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12"> 
      <button type="submit" 
        class="btn btn-default-rb btn-large center-block"> 
        <?php echo __('Entrar') ?> 
      </button> 
     </div> 
    </div> 
</form> 

和我有如下控制器片段：

usersApp.controller('userApp.controller', [ '$scope', '$http', '$location', 
    function($scope, $http, $location) { 

     var base = document.getElementById('local_url').href; 

     $scope.login = function() { 

      //This code is the problem 
      var e = angular.element(document.querySelector('#email')); 
      e = $(scope.$element); 


      if(e.hasClass('ng-invalid-email')) { 
       bootbox.alert('O e-mail digitado é inválido');//This e-mail is invalid. 
       return; 
      } 
     .... 

我想知道如果元素一個班級（在這個無效電子郵件中），但我不知道我該怎麼做。

我不能使用默認的驗證，我需要顯示消息和控制器沒有這個驗證工作。

你能幫我嗎。

Answer 1

您應該使用angular form validation directives，並在表單無效時禁用您的提交按鈕。

<button type="submit" ng-disabled="form.$invalid" ng-click="login()" class="btn btn-default-rb btn-large center-block"> 

這裏是您的解決方案小提琴：http://jsfiddle.net/4dt3mruq/28/