角度のあるjsが予想通りにDOMを更新しない

Question

私はこれを行うにあたり、基本的にはテキストボックスに入力されたアドレスを地理的にエンコードしています。アドレスが入力され、「入力」が押されると、DOMは直ちに更新されず、テキストボックスへの別の変更を待つ。送信後すぐにテーブルを更新するにはどうすればよいですか？ 私はAngularにはとても新しいですが、私は学んでいます。私はそれが面白いと思うが、私は違った考え方をする必要がある。ここで

はあなたの問題はgeocode機能が非同期であるということですので、サイクルをダイジェストAngularJSの外で更新しフィドルと私の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

です。私は必要なものだけ

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} 
     }); 
    }); 
});