元素上的多個指令不工作

我有一個輸入元素，其中有兩個指令（屬性）。如果輸入無效，它會添加一個錯誤類。元素上的多個指令不工作

<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

您是否嘗試過在阿爾法指令，例如將「錯誤」類的名字？它可能是alpha指令覆蓋所需指令的類「錯誤」或反之亦然 – Ragnar 2014-10-01 17:26:49

我不知道爲什麼它不起作用（我沒有看它），但你正在重新發明輪子在這裏。仔細看看內置的輸入指令和內置的ngModelController/formController。 – gkalpak 2014-10-01 17:27:24

在一次通過驗證和一次失敗的情況下，指令''keyup'處理程序是否會互相破壞？ – pdoherty926 2014-10-01 17:34:20

它們不能一起工作，因爲它們會覆蓋彼此的變化。我增加了額外的條件，以避免這一點：

<!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

啊是啊。我之前曾嘗試過類似的東西，但我也想擺脫元素中如此多的角度條件。 – 2014-10-03 01:10:27

@AlexCoroza：我假設你引用'title'表達式（因爲除了條件與你的例子相同外）。爲此，您可以創建一個指令來根據有效性設置標題（您不需要設置錯誤類，因爲這是爲您處理的）。或者（而不是更改「標題」），它是通常更好地提供一些錯誤消息（也可以看看ngMessages）。 – gkalpak 2014-10-03 05:56:53

元素上的多個指令不工作

回答

相關問題