Question

我使用phonegap在android，ios和windows上创建应用程序。我使用这个js作为JSON，要求营业时间（shours1，shours2，shours3）：

(function(){
'use strict';
  var app = angular.module('app', ['onsen', 'angular-images-loaded', 'ngMap', 'angular-carousel']);
app.controller('restaurantController', function($http, $scope, $compile, $sce){


 $scope.getHours = function(){

  $scope.isFetching = true;

  $scope.shours1 = '';
  $scope.shours2 = '';
  $scope.shours3 = '';

  $http.jsonp('http://signsrestaurant.ca/api/get_posts/?post_type=restaurant&posts_per_page=-1&callback=JSON_CALLBACK').success(function(response) {

    // Get's the first restaurant

    $scope.restaurantJson = response.posts[0];
    $scope.isFetching = false;
    console.log( $scope.restaurantJson.custom_fields.shours1[0] );

    $scope.shours1 = $scope.restaurantJson.custom_fields.shours1[0];
    $scope.shours2 = $scope.restaurantJson.custom_fields.shours2[0];
    $scope.shours3 = $scope.restaurantJson.custom_fields.shours3[0];

   });

  }

});
})();

这是我的HTML：

   <ons-page ng-controller="restaurantController" ng-init="getHours()">
   <ons-toolbar>
   <div class="left">
   <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
   </div>
   <div class="center">Location</div>
   <div class="right" ng-show="isFetching">
   <ons-toolbar-button><ons-icon icon="ion-loading-c" fixed-width="false" ></ons-icon></ons-toolbar-button>
    </div>
    </ons-toolbar>

    <div class="app-page">
    <div class="app-page-photo">   
    <ons-row class="app-map">   
    <ons-col>
      <map center="[43.664639, -79.384649]">
        <marker
            position="[43.664639, -79.384649]"
            title="Signs Restaurant & Bar"
            animation="Animation.BOUNCE" 
            visible="true" ></marker>

       </map>
       </ons-col>
       </ons-row>
       <ons-list class="app-photo-buttons">
       <ons-list-item modifier="action-buttons">
        <ons-row class="action">
          <ons-col class="action-col"> 
            <div class="action-icon"><ons-icon icon="ion-ios-star-half"></ons-icon></div>
            <div class="action-label">Rate</div>
          </ons-col>

          <ons-col class="action-col">
            <div class="action-icon"><ons-icon icon="ion-bookmark"></ons-icon></div>
            <div class="action-label">Favorite</div>
          </ons-col>

          <ons-col class="action-col">
            <div class="action-icon" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')"><ons-icon icon="ion-ios-telephone"></ons-icon></div>
            <div class="action-label" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')">Call</div>
          </ons-col>

          <ons-col class="action-col">
            <div class="action-icon" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')"><ons-icon icon="ion-map"></ons-icon></div>
            <div class="action-label" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')">Directions</div>
          </ons-col>
        </ons-row>
       </ons-list-item>
       </ons-list>

       <ons-list modifier="inset" style="margin-top: 10px">
       <ons-list-item>
       <div class="app-open-desc">
        <ons-icon icon="ion-android-clock"></ons-icon>
        Monday <span class="label label-danger">{{ shours1 }}</span>
       </div>
       </ons-list-item>
       <ons-list-item>
       <div class="app-open-desc">
        <ons-icon icon="ion-android-clock"></ons-icon>
        Tuesday-Thursday <span class="label label-default">{{ shours2 }}</span>
      </div>
    </ons-list-item>
    <ons-list-item>
      <div class="app-open-desc">
        <ons-icon icon="ion-android-clock"></ons-icon>
        Friday-Sunday <span class="label label-default">{{ shours3 }}</span>
      </div>
    </ons-list-item>
  </ons-list>

  </div>
  </div>

</ons-page>

似乎部分工作。只有在我旋转我的机器人或点击菜单后才会加载。它不会立即装载。它基本上需要某种刷新来加载它。如果有人可以帮我解决这个问题，我将不胜感激。

Answer 1

这看起来像一个angularjs问题比cordova更多。 AFAIK，$ http服务在成功时将更改应用于DOM，但您可以尝试在回调方法中手动调用$scope.apply()（使用jsonp调用检索数据。

以下是我通过google发现的内容：https://github.com/angular/angular.js/wiki/When-to-use- $ scope。$ apply（）

带有phonegap的JSON加载问题

1 个答案: