Controller-Variable nicht direkt in HTML angezeigt bekommen

Question

Ich versuche, eine Auswahl Dropdown-Liste aus Daten aus der Datenbank extrahierten zu machen, um zu einem bestimmten Zeitpunkt meines html zu wählen ist:

<div> 
     <div>Select Year</div> 
     <select class="browser-default" data-ng-model="year"> 
      <option ng-repeat="year in years">{{year}}</option> 
     </select> 
     <div>Select Month</div> 
     <select class="browser-default" data-ng-model="month" ng-options="month.id as month.name for month in months" ></select> 
     <a class="btn waves-effect waves-light blue darken-1 right bout2" ng-click="changeDate(month, year)">Confirm</a> 
     </div> 

und in meinem Controller:

socket.emit('Question', { 
     // SQL to get the years from database 
    }); 
socket.on('response', function (data){ 

      $scope.years =data.rep; 
      $scope.year = "2016"; 
}); 
$scope.list_months = {"months":[{"id":"01","name":"Janvier"},{"id":"02","name":"Fevrier"},{"id":"03","name":"Mars"},{"id":"04","name":"Avril"},{"id":"05","name":"Mai"},{"id":"06","name":"Juin"},{"id":"07","name":"Juillet"},{"id":"08","name":"Aout"},{"id":"09","name":"Septembre"},{"id":"10","name":"Octobre"},{"id":"11","name":"Novembre"},{"id":"12","name":"Decembre"}]}; 
    $scope.months = $scope.list_months.months; 

die Ausgabe der Monate arbeiten perfekt und wird auch leicht durch assining Wert auf $ scope.month, aber es ist eine andere Geschichte für die nächsten Jahre, wenn ich aktualisieren die App manchmal die Liste initialisiert erscheint und manchmal nicht (die Dropdown-Liste ist leer). Da es richtig erscheint, bedeutet das, dass das Problem nicht in SQL ist, aber was macht es verschwinden ?? Könnten Sie mir bitte helfen, herauszufinden, was ich falsch mache?

Vielen Dank im Voraus

Answer 1

Sie sind für die socket.io Objekt $scope.years in der Event-Handler-Einstellung. Dies wird von einer externen Quelle außerhalb von Angular ausgelöst, was bedeutet, dass es sich der Änderung nicht bewusst ist und daher keine $digest() ausführen wird, um die Seite zu aktualisieren.

Sie müssen manuell $scope.$apply() rufen nach der years und year Eigenschaften festlegen:

socket.on('response', function (data){ 
    $scope.years = data.rep; 
    $scope.year = "2016"; 
    $scope.$apply(); 
}); 

Gelegentlich kann es zu funktionieren scheinen, weil eine andere Aktion auf der Seite verursacht Angular ist ein $digest() zu laufen, und die Jahre Dropdown wird als Nebeneffekt davon neu gerendert.