javascript - 如何在AngularJS组件中设置观察者？

我正在使用NgMap来显示Google地图，并且需要能够从网站的各个部分更改中心位置。我为此有markerService：

 angular.module('markerService')
        .factory('MarkerService', MarkerService);
    MarkerService.$inject = [];
    function MarkerService(){
        var coords = [
            56.936,
            23.12
        ]
        var markers = [];
        return {
            setCoords: setCoords,
            getCoords: getCoords,
            setMarkers: setMarkers,
            getMarkers: getMarkers,
        };

        function setCoords(a){
            coords = a;
        }
        function getCoords{
            return coords;
        }
        function setMarkers(a){
            markers= a;
        }
        function getMarkers(){
            return markers;
        }
   }

然后我有使用NgMap的组件图：

    angular.module('map')
        .component('mapComponent', {
            templateUrl: 'app/mapComponent/map.html',
            controller: mapController
        });
    mapController.$inject = ['NgMap', 'MarkerService'];
    function mapController(NgMap, MarkerService){
        var ctrl = this;
        ctrl.markers = MarkerService.getMarkers();
        ctrl.center = MarkerService.getCoords();
    }
}

和模板：

<div class="map_wrapper">
    <ng-map default-style="false"
            center="{{$ctrl.center}}"
            zoom="10"
            >
        <marker ng-repeat="m in $ctrl.markers" position="{{m.lat}},{{m.lng}}" on-click="$ctrl.openModal()"></marker>
    </ng-map>
</div>

如果我使用MarkerService.setMarkers([...])更改标记数组，则地图上的标记会更新，因为ng-repeat设置了观察者，但使用MarkerService.setCords([...])更改坐标不会更改地图中心，因为没有观察者。

我尝试使用ng-bind center="ng-bind='$ctrl.center'"，但是从逻辑上讲它没有用。我确定必须从组件控制器设置观察器，但是无论尝试如何，我都无法做到这一点。

更新：

进行了认真的调查，发现了一些奇怪的行为。

MarkerService.getCoords()不返回坐标实例，但返回值。如果我使用MarkerService.setCoords(//some value)更改坐标，则不会反映在先前声明为var ctrl.center=MarkerService.getCoords();的变量中，但是如果再次调用getter，则会得到更新后的值。

这很奇怪，因为我以前已经使用过这种getter和setter方法，并且始终依赖于getter会返回变量的实例这一事实。

最佳答案

如果要设置观察者，则必须使用$scope。

为此，您需要将其注入到控制器中：

MarkerService.$inject = ['$scope'];

然后添加您的观察者：

function MarkerService($scope){
    $scope.$watch([...]);
}

但是您遇到的问题似乎并非来自这里，我认为您是在错误的对象上设置了坐标，这就是为什么地图没有更新的原因。

你这样做吗？：

MarkerService.setCoords(coords)
ctrl.center = MarkerService.getCoords();