2017-04-26 83 views
1

我有它有很多指令該輸入:如何將輸入字段放入可重用字段?

<input class="form-control" 
             mobile-number 
             limit-characters 
             number-only 
             dir="ltr" 
             ng-class="{'error-form-control': vm.form.step2.phoneNumber.$invalid && (vm.form.step2.phoneNumber.$dirty || vm.form.step2.phoneNumber.$touched)}" 
             required 
             ng-model="vm.formData.phoneNumber" 
             name="phoneNumber" 
             type="text"> 

我怎樣才能使之成爲一個可重複使用的指令,像這樣:

<phone-number ng-model="vm.formData.phoneNumber"></phone-number> 

,我怎麼能使用角度表單驗證此指令?

回答

2

我guees它看起來像這樣

app.directive('phoneNumber', function(){ 
     return { 
      scope: { 
      ngModel: '=' 
      classValidation: '=', 
      inputName: '@' 
      }, 
      template: ' <input class="form-control" mobile-number limit-characters number-only dir="ltr" ng-class="classValidation" required ng-model="ngModel" name="{{inputName}}" type="text">', 
      link: function(scope, elem, attr, ctrl) { 

      } 
     } 
}) 

HTML

<phone-number ng-model="vm.formData.phoneNumber" input-name="phoneNumber" class-validation="{'error-form-control': vm.form.step2.phoneNumber.$invalid && (vm.form.step2.phoneNumber.$dirty || vm.form.step2.phoneNumber.$touched)}"></phone-number>