Несколько директив на элемент НЕ РАБОТАЕТ

У меня есть элемент ввода с двумя директивами (атрибутами) в нем. он добавляет ошибку класс, если вход недействителен.Несколько директив на элемент НЕ РАБОТАЕТ

<input required alpha type="text" name="firstName" ng-model="newUser.firstName" class="form-control" maxlength="30" placeholder="First Name" />

и это мои директивы

// SHOWS AN ERROR IF THE INPUT IS EMPTY 
directives.required = function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      elem.on('keyup', function(event) { 
       if(elem.val().trim() == '') { 
        elem.prop('title', 'This input is required!'); 
        elem.addClass('error'); 
       } else { 
        elem.prop('title', ''); 
        elem.removeClass('error'); 
       } 
      }) 
     } 
    } 
}; 

// SHOWS AN ERROR IF THE INPUT CONTAINS NON ALPHA CHARACTERS 
directives.alpha = function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      var regexp = /^[A-Za-z ñÑ]+$/; 
      var char; 
      elem.on('keyup', function(event) { 
       if(!regexp.test(elem.val())) { 
        elem.prop('title', 'This input can contain letters only!'); 
        elem.addClass('error'); 
       } else { 
        elem.prop('title', ''); 
        elem.removeClass('error'); 
       } 
      }) 
     } 
    } 
};

Но оно не делать то, что я ожидал. работает только одна директива! Когда я попытался удалить атрибут alpha, требуется сейчас работает! Может ли кто-нибудь сказать мне, почему это работает?

источник

2014-10-01 boi_echos

вы пробовали изменения имени класса «ошибка», например, в альфа-директивы? возможно, альфа-директива переписывает класс «ошибка» требуемой директивы или наоборот. – Ragnar

Я не знаю, почему он не работает (я не смотрел на него), но вы изобретаете колесо здесь. Посмотрите на встроенную директиву ввода и встроенный контроллер ngModelController/formController. – gkalpak

Не являются ли обработчики 'keyup' директив, которые собираются сжать друг друга в случае одной проходящей проверки и одной ошибки? – pdoherty926

Они не работают вместе, потому что они переписывают друг друга. Я добавил дополнительное условие, чтобы избежать этого:

<!doctype html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script> 
 
    </head> 
 
    <body ng-app="plunker"> 
 
     <div ng-controller="MainCtrl"> 
 
      <input required="" alpha="" type="text" name="firstName" ng-model="newUser.firstName" class="form-control" maxlength="30" placeholder="First Name" /> 
 
     </div> 
 
     <script> 
 
      var app = angular.module('plunker', []); 
 
      app.controller('MainCtrl', ['$scope', function($scope) { 
 

 
      }]).directive('required', function() { 
 
       return { 
 
        restrict: 'A', 
 
        link: function(scope, elem, attrs) { 
 
         elem.on('keyup', function(event) { 
 
          var title = 'This input is required!'; 
 
          if(elem.val().trim() == '') { 
 
           elem.prop('title', 'This input is required!'); 
 
           elem.addClass('error'); 
 
          } else if (elem.prop('title') == title) { 
 
           elem.prop('title', ''); 
 
           elem.removeClass('error'); 
 
          } 
 
         }) 
 
        } 
 
       } 
 
      }).directive('alpha', function() { 
 
       return { 
 
        restrict: 'A', 
 
        link: function(scope, elem, attrs) { 
 
         var regexp = /^[A-Za-z]*$/; 
 
         var char; 
 
         elem.on('keyup', function(event) { 
 
          var title = 'This input can contain letters only!'; 
 
          if(!regexp.test(elem.val())) { 
 
           elem.prop('title', title); 
 
           elem.addClass('error'); 
 
          } else if (elem.prop('title') == title) { 
 
           elem.prop('title', ''); 
 
           elem.removeClass('error'); 
 
          } 
 
         }) 
 
        } 
 
       } 
 
      }); 
 
     </script> 
 
    </body> 
 
</html>

источник

2014-10-02 00:07:15

То, что вы хотите, может быть достигнуто с помощью встроенных директив и контроллера-функциональность:

<!-- HTML --> 
<input type="text" name="firstName" placeholder="First name" ng-model="someProp" 
     ng-pattern="/^[A-Za-z ñÑ]*$/" ng-required="true" 
     title="{{form1.firstName.$error.pattern?'Should only contain letters': 
       form1.firstName.$error.required?'This field is required':''}}" /> 

/* CSS */ 
input.ng-invalid-pattern, 
input.ng-invalid-required { 
    /* Put the styles for your .error class here */ 
}

См, также, это short demo.

источник

2014-10-02 00:07:04 gkalpak

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

@AlexCoroza: Я предполагаю, что вы ссылаетесь на выражение 'title' (потому что кроме этого условия такие же, как в вашем примере). Для этого вы можете либо создать директиву, чтобы просто установить заголовок на основе действительности (вам не нужно устанавливать классы ошибок, так как это заботится о вас.) Или (вместо изменения 'title') это обычно лучше вывести сообщение об ошибке (посмотрите также на ngMessages). – gkalpak

Несколько директив на элемент НЕ РАБОТАЕТ

ответ

Смежные вопросы