Как получить несколько директив jQuery/datetimepicker для совместной работы?

Question

В то время как я создал следующий JQuery DateTimePicker плагин, завернутый в угловой директиве, которая работает отлично:

http://jsfiddle.net/edwardtanguay/x9oa0u6n/2 (один экземпляр директивы, работа)

Я, конечно, хочу эта директиву, чтобы быть в состоянии назвать несколько раз на странице, но даже несмотря на то, что я сделал идентификатор переменной, несколько элементов управления не работают по какой-то причине, я подозреваю, что это связано с тем, что мне нужно также изменить значение параметра dp.change, но я не уверен, что именно это имеет в виду.

http://jsfiddle.net/x9oa0u6n/4 (два экземпляра директивы, НЕ РАБОТАЕТ)

Как я могу получить эту директиву, чтобы работать независимо друг от друга несколько раз на странице?

<script type="text/ng-template" id="templateCalendarPicker"> 
    <div class='input-group date datepicker_format' id="{{dpid}}" style="width:{{width}}px"> 
     <input type='text' class="form-control" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div> 
</script> 

<div ng-controller="mainController"> 
    <div calendar-picker width="200" date="date1" dpid="d1"></div> 
    <div>The first date is <b>{{date1}}</b>.</div> 
</div> 

<div ng-controller="mainController"> 
    <div calendar-picker width="200" date="date2" dpid="d2"></div> 
    <div>The second date is <b>{{date2}}</b>.</div> 
</div> 

---

angular.module('myApp', []) 
.controller('mainController', function($scope) { 
    $scope.date1 = '2015-09-01'; 
    $scope.date2 = '2015-09-30'; 
}) 
.directive('calendarPicker', function() { 
    var controller = function ($scope) { 
     var vm = this; 
     $('#datepicker').datetimepicker({ 
      format:'YYYY-MM-DD', 
      defaultDate: new Date($scope.date) 
     }); 

     var elemId = '#'+$scope.dpid; 
     console.log(elemId); 

     $(document).on('dp.change', elemId, function (a) { 
      var selected_date = moment(a.date._d).format('YYYY-MM-DD'); 
      $scope.date = selected_date; 
      $scope.$apply(); 
     }); 

     $scope.$on('$destroy', function() { 
      $('#datepicker').data("DateTimePicker").destroy(); 
     });   
    }; 

    return { 
     restrict: 'A', 
     scope: { 
      date : '=', 
      width : '@', 
      dpid : '@' 
     }, 
     controller: controller, 
     controllerAs: 'vm', 
     bindToController: true, 
     templateUrl: 'templateCalendarPicker' 
    }; 
}); 

Answer 1

<div class="form-group" show-errors> 
    <div class="input-group date"> 
     <div class="input-group-content"> 
      <input type="text" datefield name="StartDate" class="form-control" ng-model="startDate" readonly="readonly" style="cursor:pointer;" required> 
    </div> 
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
    </div> 
</div> 

Вы можете повторно использовать DateField директиву, который я использовал.

Угловая Код

angular.module('ngApp').directive('datefield', function() { 
     return { 
      restrict: 'AC', 
      link: function (scope, element, attrs) { 
       element.datepicker({ autoclose: true, todayHighlight: true }); 
      } 
     } 
    }); 

Кроме того, вы не должны повторять дважды mainController вы можете инкапсулировать его к одному и привести в такое же поведение моего декорирования с директивой любое количество раз.