如何访问元素属性从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/