Question

我正在尝试在模板上看到我的卡片，这个问题只有在我执行$ state.reload（）之后才能看到它。或打开侧边菜单，我的模板看起来像：

<ion-view>
<ion-nav-title> {{'nearPlaces_title'| translate}}
</ion-nav-title>
<ion-content>
    <div class="bar bar-header item-input-inset">
        <input id="autocomplete" type="search" placeholder="Search" g-places-autocomplete ng-model="myScopeVar"/>
    </div>
    <ion-refresher pulling-text="Pull to refresh" on-refresh="doRefresh()">
    </ion-refresher>
    <div class="list">
        <a ng-repeat="item in items" class="item card"
           href="#/tab/details/{{item.queId}}">
                <div class="row">
                    <div class="col col-25">
                        <img ng-src="{{ item.entrancePhotoUrl }}" style="height:90%;width:90%">
                    </div>
                    <div class="col col-50" >
                        <div >
                            {{ item.name }}
                        </div>
                        <p style="text-wrap: normal;">
                            {{ item.streetAddress }}
                        </p>
                    </div>
                    <div class="col col-25">
                        <wj-radial-gauge
                                value="item.waitTimeEstimationSec"
                                min="{{config.minTimeToWaite}}"
                                max="{{config.maxTimeToWaite}}"
                                start-angle="-60"
                                sweep-angle="240"
                                is-read-only="true"
                                show-ranges="true">
                            <wj-range wj-property="pointer" thickness="0.5"></wj-range>
                            <wj-range min="0" max="{{max*.33}}" color="rgba(100,255,100,.2)"></wj-range>
                            <wj-range min="{{max*.33}}" max="{{max*.66}}" color="rgba(255,255,100,.2)"></wj-range>
                            <wj-range min="{{max*.66}}" max="{{max}}" color="rgba(255,100,100,.2)"></wj-range>
                        </wj-radial-gauge>
                    </div>
                </div>
        </a>
    </div>
</ion-content>

控制台上也没有错误

更新：

.controller('PlaceslistsCtrl', function ($scope, LocationService, PlacesService, $state) {
    $scope.items = [];
    LocationService.getNearPlaces().then(function (data) {
        for (var i = 0; i < data.length; i++)
            $scope.items.push(data[i].attributes);
        $scope.config = configData;
        PlacesService.setData($scope.items);

        var input = document.getElementById('autocomplete');
        var autocomplete = new google.maps.places.Autocomplete(input, {
            types: ['(establishment)'],
            componentRestrictions: {country: "il"}
        });
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
        });
        //$state.reload();
    });

Answer 1

看起来像LocationService.getNearPlaces（）返回promise，但是如果它没有使用内置服务，你应该在回调结束时调用$ scope。$ apply（）

.controller('PlaceslistsCtrl', function ($scope, LocationService, PlacesService, $state) {
$scope.items = [];
LocationService.getNearPlaces().then(function (data) {
    for (var i = 0; i < data.length; i++)
        $scope.items.push(data[i].attributes);
    $scope.config = configData;
    PlacesService.setData($scope.items);

    var input = document.getElementById('autocomplete');
    var autocomplete = new google.maps.places.Autocomplete(input, {
        types: ['(establishment)'],
        componentRestrictions: {country: "il"}
    });
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();
    });
    //$state.reload();
    $scope.$apply();
});

得到空白的屏幕

1 个答案: