AngularJS直放站在從POST中收到新值後不會更新

我正試圖解決在有趣項目中學習Angular並遇到無法找到解決方案的問題。AngularJS直放站在從POST中收到新值後不會更新

當頁面加載時，我從Web API方法獲取數據並將結果放入vm.Locations中。這些結果最終會通過中繼器顯示在頁面上。

後來，在Google的Places API返回特定位置數據（單個記錄）後，createLocation get被調用。該數據獲取發佈到Web API方法，如果成功，我將結果推送到vm.Locations中。

在初始頁面加載時，一切正常加載。稍後調用createLocation並且mc.locations.length綁定顯示適當的更新值，但是轉發器中的結果元素從不更新以顯示新元素。

我在想，$ scope。$ apply不應該是必須的，因爲array.length似乎可以正確解析，但我暫時沒有想法。

以下是主要部分：

頁：

<div ng-controller="MapController as mc"> 
    <h1>Locations ({{mc.locations.length}})</h1> 
    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Address</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="location in mc.locations"> 
       <td>{{location.Name}}</td> 
       <td>{{location.FormattedAddress}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

控制器：

function MapController($http) { 
    var vm = this;  
    var dataService = $http;   
    vm.locations = []; 

    vm.createLocation = function(location) {     
      var locationData = { 
       Name: location.name, 
       PlaceId: location.place_id, 
       FormattedAddress: location.formatted_address, 
       Latitude: location.geometry.location.lat(), 
       Longitude: location.geometry.location.lng() 
      } 

      var config = { 
       headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' } 
      } 

      dataService.post("api/Location/AddLocation", locationData) 
      .success(function (data, status, headers, config) { 
       vm.locations.push(data);      
      }) 
      .error(function (data, status, header, config) {     
       alert(status); 
      }); 

     } 

    function getAllSavedLocations() { 
     dataService.get("/api/Location/GetAllLocations") 
     .then(function (result) { 

      angular.extend(vm.locations, result.data);     

      vm.locations.forEach(function (place) { 
       bounds.extend(new google.maps.LatLng(place.Latitude, place.Longitude)); 
       vm.addLocationToMap(place.Name, place.Latitude, place.Longitude); 
      }); 
     }, 
     function (error) { 
      handleException(error); 
     }); 
    } 

    ... 

}

來源

2017-01-23 Sean Bogert

您是否嘗試$ scope。$ apply獲取數據後。 – Shubhranshu

是的絕望，我做了修改，給它一個鏡頭，它會導致下面的錯誤得到拋出：https://docs.angularjs.org/error/$rootScope/inprog?p0=$digest –

@SeanBogert在哪裏做了你把你的$ scope。$ apply（）語句放在你的代碼中？ – CrazyMac

在createLocation的成功回調，並在代碼：

vm.locations .push（data）;

確保數據由您的API返回的格式正確，並具有Name和FormattedAddress屬性。記錄此數據或在調試器上檢查它

來源

2017-01-23 10:37:04 Faly

這是一個很好的想法，但我只是檢查一切正確匹配 –

AngularJS直放站在從POST中收到新值後不會更新

回答

相關問題