如何为 daterangepicker 创建指令？答案

【问题标题】：how to create directive for daterangepicker?如何为 daterangepicker 创建指令？
【发布时间】：2015-08-13 04:20:28
【问题描述】：

我在这个网站上遇到了这个不错的日期选择器：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>

即使它在第一个 plunkr 中工作，我也不能让它作为指令工作。为什么会出现此错误：

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

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案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
                    });
                }

            }
        };
    });

【讨论】：