當我嘗試在ajax請求之後設置它時，範圍並未填充

我試圖從API獲取數據並使用此數據組成Google Maps。但不幸的是，當我在.then（）中設置數據時，它不工作。當我嘗試在ajax請求之後設置它時，範圍並未填充

這是我的控制器

var alertController = function alertController($scope, alertData) { 


// Local variable private variable 
    var _data; 

    // Retreving data from API 
    alertData.getData() 
    .then(function(data){ 
     _data = data; 
     // Setting scope variables 
     $scope.options = { 
     scrollwheel: false 
     }; 
     $scope.markers = alertData.locations; 
     $scope.map = { center: { latitude: _data.latitude, longitude: _data.longitude }, zoom: 16 }; 
    }) 
    .catch(function(data, status, headers, config){ 
     $log.warn(data, status, headers, config); 
    }); 

// _data is undefined here, how can i make it "defined" 
} 

alertApp.controller('alertController', alertController);

我的服務

function alertData($http){ 
    var alertData = {}; 

    alertData.getData = function() { 
    var settings = { 
     "url": "url", 
     "method": "POST", 
     "headers": { 
     "Accept": "application/vnd.api+json", 
     "Auth-Token": "token", 
     "Content-type": "application/vnd.api+json", 
     }, 
     "data": "{ data }" 
    } 
    return $http(settings); 
    }; 

    alertData.locations = [ 
     {id: 1, latitude: 52.012812, longitude: 4.365468, title: "1"}, 
     {id: 2, latitude: 52.012832, longitude: 4.365475, title: "2"}, 
     {id: 3, latitude: 52.012843, longitude: 4.365448, title: "3"}, 
     {id: 4, latitude: 52.012843, longitude: 4.365238, title: "4"}, 
     {id: 5, latitude: 52.012812, longitude: 4.361748, title: "5"}, 
     {id: 6, latitude: 52.012865, longitude: 4.3653458, title: "6"}, 
     {id: 7, latitude: 52.012876, longitude: 4.365768, title: "7"}, 
     {id: 8, latitude: 52.012865, longitude: 4.365348, title: "8"}, 
     {id: 9, latitude: 52.012845, longitude: 4.365758, title: "9"}, 
     {id: 10, latitude: 52.012834, longitude: 4.3654475, title: "10"}, 
     {id: 11, latitude: 52.012816, longitude: 4.3654345, title: "11"}, 
     {id: 12, latitude: 52.012826, longitude: 4.365472, title: "12"}, 
     {id: 13, latitude: 52.012815, longitude: 4.365457, title: "13"}, 
     {id: 14, latitude: 52.012838, longitude: 4.365427, title: "14"}, 
     ]; 

    return alertData; 
} 

alertApp.factory('alertData', alertData);

的HTML

<div id="container" class="container" ng-controller="alertController"> 
     <ui-gmap-google-map center='map.center' options="options" zoom='map.zoom'> 
      <ui-gmap-markers models="markers" coords="'self'" icon="'icon'"> 
      </ui-gmap-markers> 
     </ui-gmap-google-map> 
     </div>

我如何能實現等到我得到的數據，比填充範圍的任何想法並讓Google地圖啓動？

UPDATE 當我console.log（_data）後getData（）。它說undefined和之前的console.log（_data）.then（）裏面給出了正確的json

來源

2017-02-23 apero

什麼data'內'。然後（功能（數據'的值）{...'？上_console_任何錯誤？什麼是顯示在您的_devtools_ _network tab_？ – lealceldeiro

你真的做任何電話嗎？你的網址是'''「url」：「url」，''' 是你在這裏粘貼的虛擬代碼還是acutal的？ – pranavjindal999

@AsielLealCeldeiro沒有錯誤，因爲它正常地獲取數據，但我認爲問題在於它在收到任何數據之前初始化地圖 – apero

根據您的意見，準備好了，這樣你就可以等待所有數據準備好「構建」組件。事情是這樣的：

<div id="container" class="container" ng-controller="alertController" data-ng-if="dataReady"> 
     <!-- google maps component here--> 
</div>

而在你的控制器：

// Retreving data from API 
    alertData.getData() 
    .then(function(data){ 
     //... 
     $scope.dataReady = true; 
    }) 
    .catch(function(data, status, headers, config){ 
     //... 
    });

重要：使用ng-if而不是ng-show/ng-hide因爲第一個創建/刪除從DOM和第二個元素只適用的CSS用於顯示或不顯示組件的類。隨着ng-if谷歌地圖組件創建時，所有所需的數據準備就緒。

來源

2017-02-23 16:33:30 lealceldeiro

非常感謝你，這工作完美 – apero

當我嘗試在ajax請求之後設置它時，範圍並未填充

回答

相關問題