angularjs – 使用工厂响应UI Bootstrap Datepicker禁用日期
|
我正在尝试禁用连接到Google日历的UI Bootstrap Datepicker中的日期,如果该日期已经有3个或更多事件.
到目前为止,我使用像这样的Angular Factory获取事件数组： gardenpage.factory('Dates',function($http,$q) {
var deffered = $q.defer();
var data = [];
var Dates = {};
Dates.async = function() {
$http.get('http://localhost:7777/events')
.success(function (d) {
data = d;
deffered.resolve();
});
return deffered.promise;
};
Dates.data = function() { return data; };
return Dates;
});
日期列表需要更多的预处理,所以我有一个函数,只在范围变量中放置3个或更多条目的日期： $scope.occurences = ['2014-07-21','2014-07-28']; 现在终于这是我修改后的默认UI Bootstrap日期选择器日期禁用功能： // Disable weekend selection
$scope.disabled = function(date,mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ||
$scope.date_occurences.indexOf( $filter('date')(date,'yyyy-MM-dd') ) !== -1 ));
};
它按预期工作,除了一个小怪癖,当日期选择器调用“禁用”函数时,数组为空,等待我假设的异步回调.这就是为什么我首先选择日期选择器中的日期,因为我的日期被禁用了. 那么如何在调用日期选择器禁用函数之前获取回调,或者如何让它等待？一种替代方法可能是在回调到达后刷新Datepicker,但我不确定日期选择器上是否存在该函数.
我没有像上面所说的完全解决这个问题,但有点解决方法：
1. `app.directive('jmDpRefreshView',function() {
var noop = function(){};
var refreshDpOnNotify = function (dpCtrl) {
return function() {
dpCtrl.refreshView();
};
};
return {
require: 'datepicker',link: function(scope,elem,attrs,dpCtrl) {
var refreshPromise = scope[attrs.jmDpRefreshView];
refreshPromise.then(noop,noop,refreshDpOnNotify(dpCtrl));
}
};
});` 调用refreshView功能 $scope.toggleDisableMode = function(){ 可以使用任何类型的操作调用toggleDisableMode函数,例如使用按钮禁用服务器中的日期：“ng-click =’toggleDisableMode()’” 另一件可能对您有帮助的事情是您可以从服务器预加载日期 //preload
$scope.dates = disable_dates();
function disable_dates() {
console.log("disable dates function")
Dates.async().then(function() {
$scope.data = Dates.data();
//do whatever you like with your data
});
}
或者,您可以在从服务器获取数据时调用延迟的“.notify()”,并在完成时禁用它. function disable_dates() {
console.log("disable dates function")
Dates.async().then(function() {
$scope.data = Dates.data();
//console.log($scope.data )
//do whatever you like with your server data.
//notice this line,calls the disable function
dateDisableDeferred.notify(new Date().getTime());
});
}
这个解决方案归功于这个问题和那里的评论： （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |