为什么我的 HTML 页面中没有立即加载 JSON 数据？

Question

这是我的控制器，它将 JSON 数据传输到 Wordpress：

app.controller('AboutController', function($scope, $http) {

$scope.device=device;
var page_id = 2;

$.ajax({
        url: 'http://davidemilone.com/provawp/?json=get_page&page_id='+page_id+'&callback=?',
        dataType: 'jsonp',
        type: 'GET',
        success: function(data) {

                $scope.page=data.page;
                console.log("contenuto" + $scope.page.content);
        }
});
});

现在，这是我的 HTML 页面：

<ons-page ng-controller="AboutController" >
  <ons-toolbar modifier="opacity">
    <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">{{page.title}}</div>
  </ons-toolbar>

  <div class="app-page-content">
    <p class="page-content" ng-bind-html="page.content"></p>
  </div>

为什么数据没有立即加载，只有在我点击返回或轮播自动滑动时才会加载；我做错了什么？

Answer 1

您没有使用 Angular 自己的工具（例如 $http 服务）与服务器通信，因此框架不知道数据已更改。

要让 Angular 知道 $scope 上的某些内容以非角度方式发生了变化，您应该在分配新数据后运行 $scope.$apply();。

（解释“点击外部”部分：它只是触发摘要循环 - 结果与 $apply() 相同，这就是当时值更新的原因）

最好使用 $http 服务。我可以看到你已经将它注入到控制器中，所以它可能是一个简单的错误，你使用了 jQuery 的 ajax 函数 insted。 （详见Angular docs for $http service）

app.controller('AboutController', function($scope, $http) {
    $scope.device=device;
    var page_id = 2;

    var url = 'http://davidemilone.com/provawp/?json=get_page&page_id='+page_id+'&callback=?';
    $http.jsonp(url).then(function(response) {
        console.log(response.data);
        $scope.page = response.data.page;
    });

});