如何为daterangepicker创建指令？

Question

我在这个网站上发现了一个很好的datepicker：http://luisfarzati.github.io/ng-bs-daterangepicker/。它在这里运行得很好：http://plnkr.co/edit/qmj5urjBb4TdtUYCuwap?p=preview

但是，我想在我的站点中创建一个重用指令：

app.directive('dateRange', function () {
    return {
        restrict: 'E',
        templateUrl: 'picker.html'
    };
});

picker.html：

<link rel="stylesheet" href="http://luisfarzati.github.io/ng-bs-daterangepicker/bower_components/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
<script src="http://luisfarzati.github.io/ng-bs-daterangepicker/bower_components/momentjs/moment.js"></script>
<script src="http://luisfarzati.github.io/ng-bs-daterangepicker/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="http://luisfarzati.github.io/ng-bs-daterangepicker/ng-bs-daterangepicker.js"></script>
<input type="daterange" ng-model="dates4" ranges="ranges">

我在index.html中使用了我的指令：

  <date-range></date-range>

即使它在第一个步骤中起作用，我也不能让它作为一个指令工作。为什么我会得到这个错误：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.14/$injector/modulerr?p0=filtersampl….com%2Fajax%2Flibs%2Fangularjs%2F1.3.0-beta.14%2Fangular.min.js%3A18%3A139)

plunkr:http://plnkr.co/edit/nr8iOIpIDSf26DxiWEJF?p=preview

Answer 1

我有另一个datepicker的代码，如果你觉得有帮助的话试试这个，

datepicker.directive('datepicker', function($compile,$modal) {
        return {
            restrict: "A",
            link: function(scope, element, attr) {

                element.addClass("datepicker-input");

                element.after("<span class='datepicker-icon'><i class='fa fa-calendar'></i></span>");

                if (attr.withmore) {
                    element.addClass("withMore");
                    element.next(".datepicker-icon").after('<a href="javascript:void(0)" ng-click="selectdaterange()" class="more-datepicker-icon" tooltip title="Advanced Date Search"><i class="fa fa-search-plus"></i></a>');
                    $compile(element.next(".datepicker-icon").next('.more-datepicker-icon'))(scope);
                }

                element.datepicker({
                    format: attr.format ? attr.format : 'dd-mm-yyyy',
                    autoclose: true,
                    todayHighlight: true
                });

                scope.selectdaterange = function(){
                    scope.modalInstance = $modal.open({
                        template  : '<div class="modal-header">'+
                                        '<h3 class="modal-title">Select Daterange</h3>'+
                                    '</div>'+
                                    '<div class="modal-body">'+
                                        'You have not selected any News to delete. Please select at least one News to delete.'+
                                    '</div>'+
                                    '<div class="modal-footer">'+
                                        '<button class="btn btn-important" ng-click="deleteCancel()">OK</button>'+
                                    '</div>',
                        scope : scope
                    });
                }

            }
        };
    });