I j angolari non aggiornano dom quando previsto

Question

Ho un trucco per questo, ma fondamentalmente quello che sta facendo è geo-codificare un indirizzo che viene inserito in una casella di testo. Dopo aver inserito l'indirizzo e premuto "invio", la dom non si aggiorna immediatamente, ma attende un'altra modifica alla casella di testo. Come faccio ad aggiornare la tabella subito dopo l'invio? Sono molto nuovo per Angular, ma sto imparando. Lo trovo interessante, ma devo imparare a pensare in modo diverso.

Ecco il violino e le mie controller.js

http://jsfiddle.net/fPBAD/

var myApp = angular.module('geo-encode', []); 

function FirstAppCtrl($scope, $http) { 
    $scope.locations = []; 
    $scope.text = ''; 
    $scope.nextId = 0; 

    var geo = new google.maps.Geocoder(); 

    $scope.add = function() { 
    if (this.text) { 

    geo.geocode(
     { address : this.text, 
      region: 'no' 
     }, function(results, status){ 
      var address = results[0].formatted_address; 
      var latitude = results[0].geometry.location.hb; 
      var longitude = results[0].geometry.location.ib; 

      $scope.locations.push({"name":address, id: $scope.nextId++,"coords":{"lat":latitude,"long":longitude}}); 
    }); 

     this.text = ''; 
    } 
    } 

    $scope.remove = function(index) { 
    $scope.locations = $scope.locations.filter(function(location){ 
     return location.id != index; 
    }) 
    } 
} 

Answer 1

Il tuo problema è che la funzione è geocode aggiornamenti asincroni e quindi al di fuori delle AngularJS digerire ciclo. È possibile risolvere questo avvolgendo la funzione di callback in una chiamata a $scope.$apply, che permette AngularJS sanno di correre un digest perché roba è cambiato:

geo.geocode(
    { address : this.text, 
    region: 'no' 
    }, function(results, status) { 
    $scope.$apply(function() { 
     var address = results[0].formatted_address; 
     var latitude = results[0].geometry.location.hb; 
     var longitude = results[0].geometry.location.ib; 

     $scope.locations.push({ 
     "name":address, id: $scope.nextId++, 
     "coords":{"lat":latitude,"long":longitude} 
     }); 
    }); 
});