使用$ 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){
   //
});