Angular Bootstrap Datepicker指令最大限度地减少html元素

Question

我们在我们的项目中为日期选择器使用Angular UI引导实现。我需要为日期选择器编写很多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>' 
    }; 
});