angular-leaflet-directive. How to bind markers?

Question

I'm trying to set markers in angular-leaflet-directive. I meet some problems when I try to bind markers.

html:

 <leaflet defaults="defaults" markers="markers"  center="center" layers="layers" defaults="defaults" height="800px" width="100%"></leaflet>

and controller:

angular.module('MapCtrl', ["leaflet-directive"])
.controller('MapController', ['$scope','$http', function($scope, $http) {      

$scope.tagline = 'Maps content';

angular.extend($scope,  {

       defaults: {
        tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
        maxZoom: 14,
        path: {
            weight: 10,
            color: '#800000',
            opacity: 1
        }
    },
    center: {
        lat: 52.218374, 
        lng: 19.594210,
        zoom: 7
    },
    markers: { },

    layers: {
            baselayers: {
                osm: {
                    name: 'OpenStreetMap',
                    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    type: 'xyz'
                },
                landscape: {
                    name: 'Landscape',
                    url: 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}\.png',
                    type: 'xyz'
                },

            }
        },
});   

 var pos = [
    {            
        "lat": "51.918374",
        "lng": "19.594210"
    },
    {            
        "lat": "51.018374",
        "lng": "19.094210"
    },
     {

        "lat": "52.518374",
        "lng": "19.594210"
    },
    {            
        "lat": "52.018374",
        "lng": "19.694210"
    }
];

var setMarkers = function () {


    var markers = {}; 
   angular.forEach(pos, function(value, key) {


                markers = {
                    lat: value.lat,
                    lng: value.lng,
                    message: 'aaa',
                    focus: true,
                    draggable: false
                };                   

            $scope.markers = markers;
            console.log(markers);
 });             

 };     
        setMarkers();    

}]);

When I try this code I received:

Object {lat: "51.918374", lng: "19.594210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
Object {lat: "51.018374", lng: "19.094210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
Object {lat: "52.518374", lng: "19.594210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
Object {lat: "52.018374", lng: "19.694210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
TypeError: Cannot read property 'lat' of null

In project page is missing info about data binding, so I'm trying experiment around. Please, give me some suggestion whats is wrong.

PS. Further investigation solved my problem. Below is working code:

var markers ={ };
var pos = [
{      
    lat: 51.918374,
    lng: 19.594210
},
{        
    lat: 51.018374,
    lng: 19.094210
},
 {        
    lat: 52.518374,
    lng: 19.594210
},
{        
    lat: 52.018374,
    lng: 19.694210
}];

 var i = 0;
 angular.forEach(pos, function(value, key) {
   markers[i++]={
     lat: value.lat,
     lng: value.lng,
     message: "aaaa",
     focus: false,
     draggable: false
    }
 };

$scope.markers =markers
});

Answer 1

您可以绑定到pos并更改模型。

<leaflet defaults="defaults" markers="pos" center="center" layers="layers" defaults="defaults" height="800px" width="100%"></leaflet>