Angular Token Error

问题

I am getting this all of a sudden, and It doesn't let me use my leaflet map properly. Everytime I click on the map, a marker is added to the same coordinates. When I try to remove markers with a function, it empties the markers-array, however the markers are still visible on the map. What's going on?

    Error: [$parse:syntax] Syntax Error: Token '.0' is an unexpected token at column 8 of the expression [markers.0] starting at [.0].
http://errors.angularjs.org/1.4.8/$parse/syntax?p0=.0&p1=is%20an%20unexpected%20token&p2=8&p3=markers.0&p4=.0
    at angular.js:68
    at Object.AST.throwError (angular.js:13100)
    at Object.AST.ast (angular.js:12870)
    at Object.ASTCompiler.compile (angular.js:13319)
    at Parser.parse (angular.js:14189)
    at $parse (angular.js:14291)
    at Scope.$watch (angular.js:15482)
    at createMarker (angular-leaflet-directive.js:1016)
    at Object.fn (angular-leaflet-directive.js:795)
    at Scope.$digest (angular.js:15896)

Here's some code if it helps.

Controller.js:

$scope.location = {lat: 8.812354, lng: -11.887342};

            $scope.center = {
                lat: 8.812354,
                lng: -11.887342,
                zoom: 8
            };

            $scope.markers = [];
            $scope.markers.push({
                lat: 8.812354,
                lng: -11.667342,
                message: "hehe"
            });

    //This one is added to the array, but doesn't show up in the map
            $scope.markers.push({
                lat: 7.812354,
                lng: -10.667342,
                message: "WOOP"
            });

$scope.$on("leafletDirectiveMap.click", function (event, args) {

            var leafEvent = args.leafletEvent;
            console.log('Ctrl3 adding marker at lat=' + leafEvent.latlng.lat + ', lng=' + leafEvent.latlng.lng);
            $scope.location.lng = leafEvent.latlng.lng;
            $scope.location.lat = leafEvent.latlng.lat;

            $scope.markers.push({
                lat: leafEvent.latlng.lat,
                lng: leafEvent.latlng.lng,
                message: "My Added Marker"
            });
        });

HTML:

<leaflet class="col-md-offset-4 map" defaults="defaults" markers="markers" center="center" layers="layers"></leaflet>

回答1:

Note that $scope.markers is supposed to be an object, not an array. The directive is trying to enumerate the properties of the markers object and fails on the numeric properties that array has.

Change your $scope.markers to {} and add new markers to the object at some key instead of pushing it to the array, for example:

$scope.markers = {};

// ...

var idx = 0;
$scope.$on("leafletDirectiveMap.click", function (event, args) {
    idx += 1;

    $scope.markers['marker' + idx] = {
        // ...
    };
});

来源：https://stackoverflow.com/questions/33901333/angular-token-error