角度控制器指令范围

Question

I've been struggling with the following problem for the last couple of hours and I have no clue how to solve it. I'm making an angular application that uses the angular-openlayers-directive directive. The $scope.center object contains the position that is initially viewed on the map. The following piece of code are the first lines of the controller of the page that is viewing the map. This all works well.

angular.extend($scope, {
    center: {
        lat: 0,
        lon: 0,
        zoom: 1,
        autodiscover: true
    },
    layers: {
        normal: {
            type: 'Tile',
            source: {
                type: 'OSM'
            }
        }
    }
});

However, now I'm trying to update the center object with a location gotten from the google geocoding api. Clicking a row of the results of a google api calls the following function in the controller:

$scope.gotoLocation = function(lat, lon) {
    $log.log("called");
    $scope.center = {
        lat: 50,
        lon: 50,
        zoom: 0
    }
}

In my console the string log "called" appears but the view of the map does not change. Also when I print $scope.center in the function the original object that is set above is printed, while this object has changed to my current lat and lon because the autodiscover option is set to true. I have checked this with the following code:

<openlayers ol-controls="controls" ol-center="center" ol-layers="layers" ol-markers="markers">
    <ol-marker ng-repeat="marker in markers" lat="marker.lat" lon="marker.lon"></ol-marker>
</openlayers>

<form>
    Latitude : <input type="number" step="any" ng-model="center.lat" />
    Longitude : <input type="number" step="any" ng-model="center.lon" />
    Zoom : <input type="number" step="any" ng-model="center.zoom" />
</form>

All 3 fields show my current lat and lon and also when I change a field the map position updates(!). I have no clue why changing the model from the template itself does work and changing it from the controller does not work. Can anyone help me with this?

Link to the directive: https://github.com/tombatossals/angular-openlayers-directive/blob/master/dist/angular-openlayers-directive.js

Answer 1

It seems your autodiscover variable is erased. Does that have to do with auto updating?

Try changing your gotoLocation function to update the properties rather than overwriting the object:

$scope.gotoLocation = function(lat, lon) {
    $log.log("called");

    $scope.center.lat = 50;
    $scope.center.lon = 50;
    $scope.center.zoom = 0;

}

Answer 2

It had to do with different scopes. My map view was included using ng-view. My search bar was included using ng-include, so they had different scopes. I solved it using a factory.