javascript - AngularJS传单问题

Question

我正在制作一个用于使用 AngularJS 进行个人培训的小应用程序，但我遇到了一个问题......我正在使用 lealet 和一个 API 来接收数据并将其显示在我的 map 中。一切正常，除了我在控制台中遇到下一个错误:

[AngularJS - Leaflet] "center"属性没有在主作用域中定义

这是我的 Controller 代码:

toulouseVeloControllers.controller('toulouseVeloDetailCtrl', ['$scope', '$routeParams', '$http',
  function($scope, $routeParams, $http) {
    $http.get('https://api.jcdecaux.com/vls/v1/stations/' + $routeParams.bornesnumber + '?contract=Toulouse&apiKey=***********************').success(function(data) {

      $scope.bornes = data;


        angular.extend($scope, {
            osloCenter: {
                lat: 59.91,
                lng: 10.75,
                zoom: 12
            },
            markers: {
                osloMarker: {
                    lat: data.position.lat,
                    lng: data.position.lng,
                    message: data.name,
                    focus: true,
                    draggable: false
                }
            },
            defaults: {
                scrollWheelZoom: false
            }
        });
    });
  }]);

这是我的 HTML 代码:

<div ng-controller="toulouseVeloDetailCtrl">
    <leaflet markers="markers" center="osloCenter" style="width: 100%; height: 500px;"></leaflet>
</div>

有人知道它失败的原因吗？

非常感谢!

Answer 1

在 http 请求完成之前，$scope.osloCenter 不会被定义。将它移到 http 成功功能之外。

toulouseVeloControllers.controller('toulouseVeloDetailCtrl', ['$scope', '$routeParams', '$http',
  function($scope, $routeParams, $http) {

     angular.extend($scope, {
                osloCenter: {
                    lat: 59.91,
                    lng: 10.75,
                    zoom: 12
                },
                markers: {},
                defaults: {
                    scrollWheelZoom: false
                }
            });
    $http.get('https://api.jcdecaux.com/vls/v1/stations/' + $routeParams.bornesnumber + '?contract=Toulouse&apiKey=***********************').success(function(data) {

      $scope.bornes = data;

      $scope.markers.osloMarker = {
                        lat: data.position.lat,
                        lng: data.position.lng,
                        message: data.name,
                        focus: true,
                        draggable: false
                    }            
    });
  }]);