$ Scope-Variable wird nicht aktualisiert bis zum zweiten Klick (AngularJS/jQuery/Bootstrap Date Range Picker)

Question

So habe ich schon ziemlich viel auf stackoverflow gesucht, und es scheint die Probleme sind ähnlich wie bei mir, aber anders. Für mich wird die Ansicht (div-Klasse mit id = "reportrange") sofort aktualisiert, um das ausgewählte Datum anzuzeigen, wenn der Benutzer den gewünschten Datumsbereich auswählt, aber die $ scope-Variable (wird verwendet, um den ausgewählten Start und das Ende zu übergeben Datumswerte in einen Filter) wird nicht aktualisiert, bis der Benutzer ein zweites Mal auf den Berichtsbereichsdiv klickt.

Ich verwende die bootstrap date range picker mit AngularJS. Hier

ist der Code in meinem Controller:

//start date when page loads 
$scope.startDate = moment().subtract(3, 'years').startOf('year').format('YYYY-MM-DD');  
//end date when page loads 
$scope.endDate = moment().add(2, 'years').endOf('year').format('YYYY-MM-DD'); 

//updates the startDate and endDate 
var updateStartEnd = function (start, end) { 
    $scope.startDate = start.format('YYYY-MM-DD'); 
    $scope.endDate = end.format('YYYY-MM-DD'); 
    //$log.info($scope.startDate); 
    //outputs the correct date but date not changed on the page 
    //$log.info($scope.endDate); 
    //outputs the correct date but date not changed on the page 
} 

$scope.dateFunc = function() { 

    function cb(start, end) { 
     updateStartEnd(start, end); 
     $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
    } 

    $('#reportrange').daterangepicker({ 

     ranges: { 
      'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
      'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
      'This Month': [moment().startOf('month'), moment().endOf('month')], 
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], 
      'This Year': [moment().startOf('year'), moment().endOf('year')] 
     } 

    }, cb); 
}; 

und dies ist Datumsbereich Picker Dropdown auf meiner HTML-Seite:

<div ng-click="dateFunc()" id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%"> 
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp; 
<span>Select a Date Range...</span> <b class="caret"></b> 
</div> 

Ich habe versucht, auch einen $ scope.watch Hinzufügen wie das Ändern des ng-klicks zu ng-init, aber keines von beiden erwies sich als nützlich. Jede Hilfe wird sehr geschätzt.

Answer 1

fixiert ich das Problem, indem $ scope Zugabe $, wie unten gesehen gelten:.

//updates the startDate and endDate 
var updateStartEnd = function (start, end) { 
    $scope.$apply(function() { 
     $scope.startDate = start.format('YYYY-MM-DD'); 
     $scope.endDate = end.format('YYYY-MM-DD');  
    }); 
};