当我尝试在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请求之后设置它时，范围并未填充

回答

相关问题