Angularjs 如何让多个jQuery/datetimepicker指令协同工作？

我创建了以下jQuery datetimepicker插件，该插件封装在Angular指令中，运行良好：

（一个指令实例，有效）

一、 当然，我希望这个指令能够在一个页面上被多次调用，但即使我将id设置为变量，但由于某种原因，多个控件不起作用，我怀疑这是因为我需要使

dp.change

参数值也是动态的，但我不确定它到底指的是什么

（两个指令实例，不起作用）

如何使该指令在页面上多次独立工作

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

另外，你不必重复主控制器两次，你可以把它封装成一个，并带来相同的行为，我的装饰与指令的任何次数

---

另外，您不必重复主控制器两次，您可以将其封装为一个，并使用指令多次引入相同的行为。将datetimepicker放置在元素上，而不是带有

id

的选择器上。您是否可以根据您的plunker（）来查看这一点，我设置了一个JSFIDLE（）但是它说

element.datetimepicker不是一个函数

，还有什么我需要添加的吗？你需要在angularjs之前加载jquery。看看这里把datetimepicker放在元素上，而不是放在选择器上，id为

id

。你能根据你的plunker（）看一下吗，我设置了一个JSFIDLE（）但是它说

element.datetimepicker不是一个函数

，还有什么我需要添加的吗？你需要在angularjs之前加载jquery。看看这里，嗯，我试图设置它，但为什么它不能识别“.datepicker”？它也无法识别

.datetimepicker

，我需要在这里做什么更改，以便它至少能够识别jquery控件？编辑了你的提琴，请检查一下，你的参考资料顺序不对嗯，我试着设置了这个，但为什么它不能识别“.datepicker”？它也无法识别

.datetimepicker

，我需要在这里做什么更改，以便它至少能够识别jquery控件？编辑了你的提琴，请检查一下，你的推荐信顺序不对

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'
    };
});

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

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