如何解决Angularjs中矢量地图数据源的承诺

Question

是的，所以我对角度非常新，并且真正享受这种体验，我慢慢地成功地经历了一些不断出现的陷阱，但是这个问题已经被困住了。

我正在加载一个Jquery Vector地图的版本，一切都在努力。我正在创建空对象，并以地图可用于颜色代码的格式从我的数据源填充它，但这里出现了问题。

当地图被实例化时，它获取对象的内容＆quot; ratingobj＆＃39;但是，资源在渲染时没有填充对象。我可以在控制台日志中看到这个，因为ratingobj总是空的。

我理解资源是一个承诺的概念，当数据被检索时，它将被填充但是我能解决的是如何获取资源来解析资源并在数据之前获取数据。正在加载地图！

请帮助，任何指针都会很棒！

由于

这是我服务中的资源查询：

 .factory('CountryData', ['$resource',
  function($resource){
    return $resource('http://mydatasource/datafeed', {}, {
      query: {
        method:'GET',
        isArray:false,

        }

    })

  }])

这是控制器

.controller('jqvmapCtrl', ['$scope' ,'CountryData', 'greeting',
function($scope, CountryData, greeting) {

  var ratingobj = {};

  $scope.rating = CountryData.query(function (response){
      angular.forEach(response.record, function(value,key) {
        ratingobj[value.countryISO] = value.countryRating;
        });
    });

    console.log(ratingobj);

  $scope.worldMap = {
    map: 'world_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverOpacity: 0,
    hoverColor: '#C2C2C2',        
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: ratingobj,
    scaleColors: ['#C4FFFF', '#07C0BB'],
    normalizeFunction: 'polynomial',
  };

}
]);

这是我的主要app文件，路径为

  .when('/countries/map', {
    templateUrl: 'views/countries/map.html',
controller: 'jqvmapCtrl',

  })

Answer 1

  

如何获取资源来解析资源并在加载地图之前获取数据

如何实现这一目标有两种方法。

1。延迟渲染地图窗口小部件，直到加载数据。将ng-if="worldMap"添加到包含地图的元素，例如

<div id="vmap" ng-if="worldMap"></div>

有关详细信息，请参阅以下SO答案：https://stackoverflow.com/a/22510508/69868

2。延迟渲染整个视图，直到加载数据。

使用resolve块扩展路径定义。

.when('/countries/map', {
  templateUrl: 'views/countries/map.html',
  controller: 'jqvmapCtrl',
  resolve: {
    ratingobj: function(CountryData) {
      return CountryData.query().$promise
        .then(function(response) {
          var ratingobj = {};
          angular.forEach(response.record, function(value,key) {
            ratingobj[value.countryISO] = value.countryRating;
          });
          return ratingobj;
        });
    }
  }
})

修改控制器以注入ratingObj而不是CountryData：

.controller('jqvmapCtrl', ['$scope' ,'ratingobj', 'greeting',
function($scope, ratingobj, greeting) {
  console.log(ratingobj);

  $scope.worldMap = {
    map: 'world_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverOpacity: 0,
    hoverColor: '#C2C2C2',
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: ratingobj,
    scaleColors: ['#C4FFFF', '#07C0BB'],
    normalizeFunction: 'polynomial',
  };
}
]);

有关详细信息，请参阅以下SO答案：https://stackoverflow.com/a/16288468/69868