Comment créer un champ de saisie dans un champ réutilisable?

Question

J'ai cette entrée avec beaucoup de directives à ce sujet:

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

Comment puis-je faire dans une directive réutilisable comme ceci:

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

et comment puis-je utiliser la validation de forme angulaire avec cette directive ?

Answer 1

Je guees il ressemblera à ceci

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>