Question

我有一个定义背景$ interval的服务。它会监视本地存储，以查看是否由于连接问题而无法进行某些服务器更新。当它找到一些时，它会定期尝试与服务器联系以获取更新，并在成功时将其从本地存储中删除。

成功后，回调还会更新角度视图/模型的某些属性。这些更改应该导致UI更新，以及他们执行的各种控制器的代码中的其他位置。

但在该后台服务的$ interval回调中，更改不会导致UI更新。我认为这可能是$ apply的某种失败，所以我添加了$ rootScope。$ apply（）调用。但这导致了一个错误，因为$ digest已在进行中。

这告诉我在回调执行后$ digest正在运行 - 这是我所期望的 - 但它并没有导致UI更新。

然后我在更新视图/模型后在服务中执行$ rootScope。$ emit（），并在控制器内监听UI应该更新的事件。在监听器中，我可以看到控制器所基于的视图/模型已由服务成功更新。

这是服务：

app.controller("mapCtrl", function ($scope, $rootScope, $location, dataContext) {
    $scope.dataContext = dataContext;

    $scope.mapInfo = {
        center:dataContext.center,
        zoom: dataContext.zoom,
        pins: dataContext.pins,
    };

    $scope.$on('mapInitialized', function(evt, map){
        $scope.dragend = function() {
            $scope.dataContext.center = $scope.map.getCenter();
            $scope.dataContext.getMapData($scope.map.getBounds());
        }

        $scope.zoomchanged = function() {
            $scope.dataContext.zoom = $scope.map.getZoom();
            $scope.dataContext.getMapData($scope.map.getBounds());
        }

        $scope.dataContext.getMapData($scope.map.getBounds())
        .then(
            function() {
                $scope.mapInfo.pins = $scope.dataContext.pins;
            },
            function() {});

    });

    $scope.click = function() {
        dataContext.pinIndex = this.pinindex;

        if( dataContext.activePin.homes.length == 1)
        {
            dataContext.homeIndex = 0;
            $location.path("/home");
        }
        else $location.path("/unit");
    };

    $rootScope.$on("visitUpdate", function(event) {
// I added this next line to force an update...even though the
// data on both sides of the assignment is the same (i.e., it was
// already changed
        $scope.mapInfo.pins = $scope.dataContext.pins;
        event.stopPropagation();
    });
});

这里是地图的控制器：

<div id="mapframe" class="google-maps">
    <map name="theMap" center="{{mapInfo.center.toUrlValue()}}" zoom="{{mapInfo.zoom}}" on-dragend="dragend()" on-zoom_changed="zoomchanged()">
        <marker ng-repeat="pin in mapInfo.pins" position="{{pin.latitude}}, {{pin.longitude}}" title="{{pin.streetAddress}}" pinindex="{{$index}}" on-click="click()" 
                icon="{{pin.icon}}"></marker>
    </map>
</div>

这是（部分）模板（依赖于ngMap）：

{{1}}

那么为什么不更新UI？

在$ interval回调中属性更改时，UI不会更新

0 个答案: