Question

我正在开发一个包含3个选项（views / datetime.html）

的datePicker指令

<select class="form-control input-group-sm w75 float-left"
        ng-model="mth"
        ng-options="x for x in ['Jan','Feb','Mar','Apr','May','Jun']">
</select> 
<select class="form-control input-group-sm w75 float-left"
        ng-model="day"
        ng-options="x for x in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]">
</select> 
<select class="form-control input-group-sm w75"
        ng-model="year"
        ng-options="x for x in [2014,2015,2016,2017,2018]">
</select>

该指令可以在每个html视图中使用一次或多次（startdate，enddate等）

<div class="input-group-sm" date-picker ng-model="startdate"></div>

我的指令编码如下：

App.directive('datePicker', function () {
var date = {};
var objLink = {
    restrict: 'A',
    templateUrl: 'views/datetime.html',
    scope: {
        ngModel: '=',
    },
    link: function($scope, element, attr) {
        $scope.$watch("mth", function(value) {
            if ( typeof value != 'undefined' ) {
                date.mth = value;
                updateTarget($scope, attr);
            }
        });        
        $scope.$watch("day", function(value) {
            if ( typeof value != 'undefined' ) {
                date.day = value;
                updateTarget($scope, attr);
            }
        });
        $scope.$watch("year", function(value) {
            if ( typeof value != 'undefined' ) {
                date.year = value;
                updateTarget($scope, attr);
            }
        });
    }
};  
return objLink;

function updateTarget( scope, attr ) {
    var d = date.mth+'-'+date.day+'-'+date.year;
    scope[attr.date] = d;
}
});

我的问题是函数UpdateTarget（）不会更新控制器中的$ scope.startdate。

任何想法......任何人？提前谢谢。

Answer 1

scope[attr.date] = d;

此处attr.date未定义。要更新控制器中的$scope.startdate，您需要传递attr.ngModel，如下所述

scope[attr.ngModel] = d;

Answer 2

......自己全力以赴！感谢任何反馈。

enter image description here

App.directive('datePicker', function () {
var mths = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var dirLink = {
    restrict: 'A',
    templateUrl: 'views/datetime.html',
    scope: {
        data : '='
    },
    link: function($scope, element, attr) {  

        // watch bound data item for change
        //  - ajax load delay from view render 
        $scope.$watch("data", function(value) {
            if ( typeof $scope.data == 'undefined' ) {
                return;
            }
            // initialise view controls
            if ( typeof $scope.mth == 'undefined' ) {
                var a = $scope.data.split(' ');
                var dt = a[0].split('-');
                $scope.mth = mths[dt[1]-1];
                $scope.year = dt[0];
                $scope.day = dt[2];
            }
        });

        // watch view controls
        $scope.$watch("mth", function(value) {
            if ( typeof value != 'undefined' ) {
                var mth = padl(mths.indexOf(value)+1);
                updateTarget($scope, 'mth', mth);
            }
        });        
        $scope.$watch("day", function(value) {
            if ( typeof value != 'undefined' ) {
                updateTarget($scope, 'day', value);
            }
        });
        $scope.$watch("year", function(value) {
            if ( typeof value != 'undefined' ) {
                updateTarget($scope, 'year', value);
            }
        });
    }
};  
return dirLink;

function updateTarget( scope, seg, val ) {
    // init date if empty
    if ( scope.data.length < 8 ) {
        var d = new Date();
        var dt = d.getYear()+'-'+padl(d.getMonth())+'-'+padl(d.getDate());
        scope.data = dt;                    
    }

    // split existing data
    var a = scope.data.split(' ');
    var dt = a[0].split('-');

    // change selected segment
    var d = ['year','mth','day'];
    dt[d.indexOf(seg)] = val;

    // reassemble date
    var d = dt[0]+'-'+dt[1]+'-'+dt[2];
    scope.data = d;
}

function padl( n ) {
    return ("0"+n).slice(-2);
}

});

通过angularjs datepicker指令更新父作用域

2 个答案: