angularjs - Angular JS 控制器设置用于具有渲染地图的动态生成视图

Question

我是 Angular 新手，

我有一个名为 Playgrounds 的数据模型，它通过我的控制器作为 json 交付。现在，在每个 id 的详细视图上，我希望在视图中动态加载游乐场键值“lng”和“lat”以呈现地图。我正在努力解决如何设置控制器以在详细视图中获取特定于 id 的 lng 和 lat 值。

控制器

function PlaygroundDetailCtrl($scope, $routeParams, $http) {
    $http.get('playgrounds/playgrounds.json').success(function(data){
        angular.forEach(data, function(item) {
          if (item.id == $routeParams.playgroundId) 
            $scope.playground = item;
        });
    });

    angular.extend($scope, {
    center: { lat, lng },
    marker: { lat: 40.0948, lng: -3.8232 },
    zoom: 12
    });
}

看法

    <h2>{{playground.id}}</h2>

<leaflet marker="marker" center="center" zoom="zoom"></leaflet>

JSON（片段）

[
    {
    "id": 1,
    "lng": 12.3677,
    "lat": 51.4524 
    }
] 

提前致谢