Question

我正在使用NgMap来显示Google地图，我需要能够从网站的varios部分更改中心位置。我有标记服务：

 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()不会返回coords的实例，而是返回值。如果我使用MarkerService.setCoords(//some value)对coords进行更改，则不会反映在先前声明为var ctrl.center=MarkerService.getCoords();的变量中，但如果我再次调用getter，则会获得更新值。

这很奇怪，因为我以前一直在使用这种getter和setter方法，并且总是依赖于getter会返回变量实例的事实。

Answer 1

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

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

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

然后添加你的观察者：

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

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

你这样做吗？：

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

Answer 2

要完成@Groben的答案（因为我遇到了同样的问题...），组件中$ watcher的严格语法为：

$scope.$watch('$ctrl.my_field', function () {
    ctrl.my_function(ctrl.my_field);
});

其中：

“ ctrl”是控制器的默认名称
别忘了注入“ $ scope”！

对于内存，模板如下所示：

<input type="text" ng-model="$ctrl.my_field" >

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

2 个答案: