双向数据绑定在datePicker指令和控制器AngularJs之间不起作用

时间:2016-12-19 09:22:36

标签: javascript angularjs datepicker

我在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似乎没有更新,因为输入仍为空白。

我认为在回调函数中如何处理范围存在问题。

请分享您的批评,想法和建议。

0 个答案:

没有答案