Угловая Bootstrap Директива Datepicker для сведения к минимуму элементов html

Question

Мы используем функцию самонагрузки UML для выбора даты в нашем проекте. Мне нужно написать много элементов HTML для выбора даты, было бы хорошей идеей написать директиву для таких задач? Если да, пожалуйста, помогите мне предоставить образец кода для любой такой директивы.

<p class="input-group"> 
       <input type="text" class="form-control" datepicker-popup ng-model="leaveSearch.td" is-open="$parent.dtLeaveToOpen" ng-required="true" /> 
       <span class="input-group-btn"> 
       <button type="button" class="btn btn-default" ng-click="datePickerOpen($event,'dtLeaveTo','dtLeaveToOpen')"><i class="glyphicon glyphicon-calendar"></i></button> 
       </span> 
      </p> 

Как можно обернуть все это в один элемент html, я думаю, используя Angular-директиву, мы можем достичь этого. Я ищу аналогичную идею.

Answer 1

Наконец я написал ниже директивы, которые работали для меня:

angularStartDirectives.directive('espireDate', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      show: '=',    
      ngModel: '=', 
      ngClass: '=', 
      ngRequired:'=' 
     }, 
     replace: true, // Replace with the template below 
     transclude: true, // we want to insert custom content inside the directive 
     require: 'ngModel', 
     link: function (scope, element, attrs) { 
      scope.open = false; 
      scope.dpOpen = function() { 
       scope.open = true;     
      }; 
     }, 
     template: '<div><div class="input-group input-group-lg" ng-click="dpOpen()" >' 
      + ' <input id="attrs.id" readonly="true" type="text" class="form-control" data-is-open="open" datepicker-popup data-ng-model="ngModel" ng-class="ngClass" ng-required="ngRequired" />' 
      + ' <span class="input-group-addon">' 
       + '<span class="glyphicon glyphicon-calendar"></span>' 
      + '</span></div></div>' 
    }; 
});