1

是的，所以我对 Angular 还很陌生，真的很享受这种体验，我正在缓慢但成功地解决了一些不断出现的问题，但是这个问题被难住了。

我正在加载 Jquery Vector 地图的一个版本，一切都很顺利。我正在创建空对象并从我的数据源中以地图可以用来为代码着色的格式填充它，但这就是问题出现的地方。

实例化地图时，它会获取对象“ratingobj”的内容，但是在呈现时资源尚未填充对象。我可以在控制台日志中看到这一点，因为 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',
  };

}
]);

这是我的主要应用程序文件与路线

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

  })
4

1 回答 1

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

于 2014-12-31T08:57:25.830 回答