使用$ scope变量设置Datepicker的最小/最大日期

Question

我面临的问题是我已经创建了一个日期选择器，并且我想根据从json收集的日期来设置其最小日期和最大日期。

问题在于，在初始化日期选择器时，$ scope变量为空。

$scope.dates = [];
$scope.stats = {};
$scope.latestDay;
$scope.startDay;

$controller('rightsController', {
    $scope : $scope
});

init();

$("#datepick").datepicker({
    changeMonth: true,
    changeYear: true,
    buttonImageOnly: true,
    dateFormat: 'dd/mm/yy',
    minDate: ''+$scope.startDay,
    maxDate: ''+$scope.latestDay
});

function init() {
    fetchHourlyStats0();
}

$scope.fetchComparativeStats = function() {
    fetchHourlyStats0();
}

function fetchHourlyStats0() {
    var promiseStats = statsFactory.getHourlyStats();
    $q.all([ promiseStats ]).then(function(values) {
       $scope.stats = values[0].data;
       i = 0;
       for ( var k in $scope.stats) {
           $scope.dates[i] = k;
           var v = $scope.stats[k];
           i++;
       }
       var length = $scope.dates.length-1;
       $scope.latestDay = $scope.dates[0];
       $scope.startDay = $scope.dates[length];
    })
}

创建数据访问对象之后并填充变量后，是否可以创建日期选择器？

Answer 1

首先，我真的建议您停止混合使用Jquery和Angular。 看一下这个线程： 如果我有jQuery背景，则“ Thinking in AngularJS”？ 我认为您真的很难将jquery设置的值添加到选择器中。

但是，这不是您现在的问题。

function fetchHourlyStats0() {
    var promiseStats = statsFactory.getHourlyStats();
    $q.all([ promiseStats ]).then(function(values) {
       // code removed
       $scope.latestDay = $scope.dates[0];
       $scope.startDay = $scope.dates[length];

       $("#datepick").datepicker({
            changeMonth: true,
            changeYear: true,
            buttonImageOnly: true,
            dateFormat: 'dd/mm/yy',
            minDate: ''+$scope.startDay,
            maxDate: ''+$scope.latestDay
        });

    });
}

您可以简单地在您的promise的.then()内部运行您的jquery代码.then()以延迟日期选择器的创建。

同样， promiseStats看起来像是一个promise。 您无需将$q注入控制器。 直接使用您的第一个承诺：

statsFactory.getHourlyStats().then(function(values){
    //
});

要么

var promiseStats = statsFactory.getHourlyStats();
promiseStats.then(function(values){
   //
});