为什么JSON数据不会立即加载到我的HTML页面中？

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();。

（解释＆＃34;点击外部＆＃34;部分：它只是触发摘要循环 - 与$apply()的结果相同，这就是为什么值正在更新的原因）< / em>的

最好使用$ http服务。我可以看到你已经将它注入控制器，所以这可能是一个简单的错误，你使用了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;
    });

});