我在这个网站上遇到了这个漂亮的日期选择器: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)
答案 0 :(得分:0)
我有另一个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
});
}
}
};
});