Как изменить директиву в угловых js на основе выбранного элемента из раскрывающегося списка

Question

У меня есть раскрывающийся список и календарь. Я создал директивы для проверки календаря. Теперь я хочу изменить директиву на выбранном выпадающем элементе.

Вот HTML

<select class="form-control half" ng-model="address.prooftype"> 
              <option value="" disabled>Select Address Proof</option> 
              <option value="dl" data-ng-disabled="paddress.prooftype == 'dl'"> 
               Driving License 
              </option> 
              <option value="passport" 
                data-ng-disabled="paddress.prooftype == 'passport'"> 
               Passport 
              </option> 
              <option value="aadharcard" 
                data-ng-disabled="paddress.prooftype == 'aadharcard'"> 
               Aadhar Card 
              </option> 
              <option value="bankstatement" 
                data-ng-disabled="paddress.prooftype == 'bankstatement'"> 
               Bank Statement 
              </option> 
              <option value="utilitybills" 
                data-ng-disabled="paddress.prooftype == 'utilitybills'"> 
               Utility Bills 
              </option> 
              <option value="voteridcard" 
                data-ng-disabled="paddress.prooftype == 'voteridcard'"> 
               Voter ID Card 
              </option> 
             </select> 
             <input readonly placeholder="Expiry Date" type='text' 
               class="btn btn-default form-control half" exp-date 
               data-ng-model="address.expdate"/> 

Угловое JS Директива

App.directive('utilityDate', function() { 
var link = function (scope, element, attrs) { 
    var date = new Date(); 
    date.setDate(date.getDate() - 90); 
    var modelName = attrs['ngModel']; 
    //console.log(modelName); 
    $(element).datepicker(
     { 
      endDate: new Date(), 
      startDate: date, 
      dateFormat: 'dd/mm/yyyy', 
      autoclose: true, 
      showMonthAfterYear: true, 
      showButtonPanel: true, 
      startView: 2, 
      onSelect: function (dateText) { 
       scope[modelName] = dateText; 
       scope.$apply(); 
      } 
     }); 
    $(element).datepicker('setDate', null); 
}; 
return { 
    require: 'ngModel', 
    restrict: 'A', 
    link: link 
}}); 
App.directive('expDate', function() { 
    var link = function(scope, element, attrs) { 
     var date = new Date(); 
     date.setDate(date.getDate() + 90); 
     var modelName = attrs['datePicker']; 
     $(element).datepicker(
      { 
       startDate: date, 
       dateFormat: 'dd/mm/yyyy', 
       autoclose: true, 
       showMonthAfterYear: true, 
       showButtonPanel: true, 
       startView: 2, 
       onSelect: function (dateText) { 
        scope[modelName] = dateText; 
        scope.$apply(); 
       } 
      }); 
    }; 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: link 
    } 
}); 

Есть 2 директивы, а именно utilitydate и expdate. Я хочу изменить календарь для утилиты, когда я нажимаю «Утилиты».

Answer 1

Может быть, что вы хотите, это просто ngSwitch: В зависимости от выбранного варианта, вы создаете один или другую директиву, и сделать их «точку» в том же ngModel.

<directive ng-switch="paddress.prooftype"> 
    <directive ng-switch-when="'utilitybills'"> 
    <input readonly placeholder="Expiry Date" type='text' utility-date data-ng-model="address.expdate"/> 
    </directive> 
    <directive ng-switch-when="'otherOptionIfNeeded'">...</directive> 
    <directive ng-switch-default> 
    <input readonly placeholder="Expiry Date" type='text' exp-date data-ng-model="address.expdate"/> 
    </directive> 
</directive> 

В приведенном выше примере, директива «utilityDate» будет использоваться при paddress.prooftype имеет значение «utilitybills». В противном случае появится директива expdate.

https://docs.angularjs.org/api/ng/directive/ngSwitch