Question

我正在使用angular-ui-gmaps。

我的内部有一个ng-repeat，它不会在$ http请求之后呈现html。

<ui-gmap-window id="info_window" show="show" coords="position" options="infoWindowOptions">
     <ui-gmaps-window>
         <ul>
              <li ng-repeat="item in items">...</li>
         </ul>
     </ui-gmaps-window>
</ui-gmaps-window>

以下是触发窗口开启的事件，它起作用。

    $scope.markerEvents = {
        "click": function (e) {
            $scope.selected = _.first(_.where($scope.items, { "id": e.model.id }));

            $scope.map.center = {
                "longitude": $scope.selected.longitude,
                "latitude": $scope.selected.latitude
            };

            $scope.position = {
                "longitude": $scope.selected.longitude,
                "latitude": $scope.selected.latitude
            };

            ItemService.feedback($scope.selected.id).then(function (response) {
                $scope.items= [1, 2, 3]; //Dummy data, just to show result isn't empty.

                //Show the window
                $scope.show = !$scope.show;
            });
        }
    };

所以是的，在$ http请求返回之前，信息窗口内容正在呈现。

任何人都知道解决方案吗？

干杯

Answer 1

确保在呈现视图之前将$scope.show初始化为false，然后在加载数据时将其显式设置为true。

$scope.show = false;
$scope.markerEvents = {
    "click": function (e) {
            ....
            ItemService.feedback($scope.selected.id).then(function (response) {
                 ....
                 $scope.show = true;
            });
        });
    }
};

我不知道<ui-gmap-window>是什么，但它可能无法处理DOM中的动态更改。所以将它包装在ng-if中以确保它仅在加载数据时创建。

<div ng-if="show">
    <ui-gmap-window id="info_window" coords="position" options="infoWindowOptions">
        <ui-gmaps-window>
           <ul>
               <li ng-repeat="item in items">...</li>
            </ul>
        </ui-gmaps-window>
    </ui-gmaps-window>
</div>

ui-gmaps-window内的ng-repeat不会从$ http调用中呈现数据

1 个答案: