我在Angularjs中制作了一个datepicker指令,在onSelect的datepicker回调中,我从$ scope更新了两个值,这些值从控制器继承了模型值。
angular.module("app")
.directive('datePicker', function(){
return {
restrict: "A",
controller: reservationController,
bindToController: true,
scope : {
dateData : "=",
returnData : "=",
periodData : "=",
},
link : function($scope, $element, $attrs ){
$($element).datepicker({
dateFormat:"yy-mm-dd",
numberOfMonths: 2,
minDate: 0,
yearSuffix: ".",
showMonthAfterYear:true,
dayNames: ['월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'],
dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'],
dayNamesShort: ['월', '화', '수', '목', '금', '토', '일'],
monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
monthNames: ['1','2','3','4','5','6','7','8','9','10','11','12'],
onSelect : function(date){
$scope.dateData = moment(date).format('YYYY-MM-DD');
var date = $scope.dateData;
var days = parseInt($scope.periodData);
if(days < 30){
$scope.returnData = moment(date).add(days, "days").format("YYYY-MM-DD");
}else{
var months = days/30
$scope.returnData = moment(date).add(months, "months").format("YYYY-MM-DD");
}
console.log($scope.returnData);
}
});
$( $element ).datepicker( "setDate", new Date());
}
}
})
这是我的观点
<div id="skip" class="container" ng-controller="reservationController as reserveCtrl">
<input type="text" period-data="reserveCtrl.period" date-picker date-data="reserveCtrl.rent_date" return-data="reserveCtrl.return_date">
<input type="text" id="" title="retun" ng-model="reserveCtrl.return_date" disabled>
</div>
如您所见,$ scope.returnData映射到reserveCtrl.return_date,$ scope.dateData映射到reservCtrl.rent_date
因此,在onSelect回调中,只要$ scope.dateData更新,我想通过$ scope.dateData和$ scope.periodData更新$ scope.returnData。 并且它显示$ scope.returnData在日志上更新。 所以。我希望这个值是要改变的第二个输入。
但是,控制器中的模型reserveCtrl.return_date似乎没有更新,因为输入仍为空白。
我认为在回调函数中如何处理范围存在问题。
请分享您的批评,想法和建议。