![](/img/trans.png)
[英]dangrossman's bootstrap-daterangepicker date change event
[英]How to Update Bindings on bootstrap-daterangepicker date change?
我在我的AngularJS应用程序和变量中使用了此插件 ,以在它们更改时存储开始和结束日期。
关于日期范围更改,如何调用控制器方法来更新页面上的数据?
就像调用范围的此方法一样:
$scope.updateDataOnDateRangeChange = function(){
// here calling few services to fetch new data for the page
// for the selected date range
}
如何为此插件使用ng-click或ng-change或custom指令?
使用jQuery插件的基本过程通常是为其创建指令。 在link
回调中,您可以初始化插件。 在这里,您可以访问jQuery或jQ-lite对象的元素,angular作用域和插件回调。 在第三方代码中更改范围时,请参阅有关使用$.apply()
重要注释
范例html:
<input my-picker type="text"/>
基本脚本概述:
app.directive('myPicker', function ($timeout) {
return {
link: function (scope, elem, attrs) {
$timeout(function () {
/* elem is a jQuery or jQ-lite object representing the element*/
elem.daterangepicker({
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
/* not overly familiar with this plugin but this callback
should allow you to set angular scopes */
function (start, end) {
/* important to do any scope changes within `$.apply()` so angular
becomes aware of changes from third party code*/
scope.$apply(function(){
/* do what you need here with angular scope
have access to plugin data as well as angular scope*/
})
});
}, 1)
}
}
})
您可以通过向标记添加其他属性,然后使用这些属性来设置各种插件选项来增强此指令。
AngularJS中存在一个ngChange指令 ,该指令应该执行您描述的操作。
将此指令添加到日期范围输入元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.