Angular JS Controller设置用于动态生成的视图和渲染的地图

Question

我是一个角色新手，

我有一个名为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 
    }
] 

提前致谢