Question

在我的应用中，我有一个“地图”来显示和处理地图上的内容。 CtrlMap控制器显示地图并显示标记。 watchPosMap观看位置变化。第三，有一个名为markerService的服务，它保存标记的属性（位置）。

结构看起来像那样。

[CtrlMap] <-> [MarkerService] <- [watchPosMap]

这是服务：

MyMapApp.service('MarkerService', function () {
    //set initial marker if no one exists
    if (property == undefined)
    {
        var property = {
            latitude: 44.49,
            longitude: -108.42};
    }
    return {
        getP: function () {
            return property;
        },
        setP: function(lat,lng) {
            consolie.info('Have new marker properties:', lat,lng);
            property = {
                latitude: lat,
                longitude: lng};
        }
    };
});

启动时，CtrlMap控制器以这种方式获取默认标记设置：$scope.marker = MarkerService.getP()。这很有效。

如果更改了设备的位置，则watchPosMap包含带有回调的navigator.geolocation.watchPosition方法，该方法会调用服务MarkerService以设置新的标记参数。

这是我的watchPosMap控制器：

MyMapApp.controller('watchPosMap', ['$scope', 'MarkerService', function($scope) {            
$scope.watchMyPositionChangesID = 
          navigator.geolocation
                    .watchPosition(function(data) {
                        mapScope=angular.element(document.getElementById('id_map'))
                                .scope();
                        angular.element(document.getElementById('id_map'))
                                .injector().get("MarkerService")
                                .setP(data.coords.latitude,data.coords.longitude);
                        mapScope.$apply();
                       },
                       function(e){$scope.errorMsg=e;},
                       { timeout: 30000 }
                      );

}]);

设置标记属性有效，但视图未更新。触发视图更新有什么待办事项吗？

Answer 1

如果您处于适当的范围内，则必须在修改角度以外的内容时更新范围。

angular.element(document.getElementById('id_map')).scope().$apply();

评论后编辑：

虽然在服务中设置了范围标记，但它不是更新事件。在使用$ apply（）

之前必须更新它

mapScope.marker = angular.element(document.getElementById('id_map'))
                            .injector().get("MarkerService")
                            .getP();

编辑2：更清洁的方式 $ apply of scope有一个回调函数，你可以使用它来实现相同的

navigator.geolocation
                .watchPosition(function(data) {
                     mapscope = angular.element(document.getElementById('id_map')).scope()
                     mapscope.$apply(function(scope){
                       MarkerService.setP(data.coords.latitude,data.coords.longitude); 
                       scope.marker = MarkerService.getP();
                     });
                   },
                   function(e){$scope.errorMsg=e;},
                   { timeout: 30000 }
                  );

通过服务更新控制器而不更新视图

1 个答案: