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

Question

这是我的 Controller ，它将 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 上的某些内容已以非 Angular 方式发生更改，您应该在分配新值后运行 $scope.$apply();数据。

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

不过，最好使用 $http 服务。我可以看到你已经将它注入(inject)到 Controller 中，所以这可能是一个简单的错误，你使用了 jQuery 的 ajax 函数。 (详情请参阅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;
    });

});