Угловое - переменная сфера не правильно обновить

Question

Контроллер:

function ProductListCtrl($scope, Product) { 
    $scope.page = 1; 

    $scope.setPage = function(page) { 
     $scope.page = page; 
    } 

    Product.query({page:$scope.page}, function(response) { 
     $scope.products = response.records; 
     $scope.product_count = response.metadata.count; 
     $scope.page_count = response.metadata.page_count; 
    }); 
} 

Вид:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span2"> 
     <!--Sidebar content--> 

     Search: <input ng-model="query"> 

     </div> 
     <div class="span10"> 
     <!--Body content--> 
      Number of products: {{product_count}}.<br> 
      Page {{page}} of {{page_count}}. 

      <ul class="products"> 
       <li ng-repeat="product in products | filter:query | orderBy:orderProp" class="thumbnail"> 
        <a href="#/products/{{product.id}}" class="thumb"><img ng-src="{{product.imageUrl}}"></a> 
        <a href="#/products/{{product.id}}">{{product.name}}</a> 
        <span ng-repeat="category in product.categories">{{category.name}}</span> 
       </li> 
      </ul> 

      <a href="#" ng-class="{disabled: page < 2}" ng-click="setPage(page-1)">Previous page</a> 
      <a href="#" ng-class="{disabled: page == page_count}" ng-click="setPage(page+1)">Next page</a> 
     </div> 
    </div> 
</div> 

я нажимаю «Следующая страница» ссылку, функция setPage вызывается с номером нужной страницы (т.е. следующая страница), но переменная страницы не обновляется в представлении. Список перезагружается из бэкэнд, но с исходным номером страницы.

Что я делаю неправильно?

Answer 1

Вам может понадобиться вызвать $ объем. $ Применять()

Answer 2

Я предполагаю, что у вас есть что-то вроде <div ng-controller="ProductListCtrl"> вокруг вашей точки зрения?

Кроме того, Product.query будет вызываться только один раз, так что если вам нужно запросить сервер снова, вы можете обернуть это в функцию и вызовите ее в setPage, когда пользователь щелкает, то есть:

var updateProducts = function() { 
    Product.query({page:$scope.page}, function(response) { 
     $scope.products = response.records; 
     $scope.product_count = response.metadata.count; 
     $scope.page_count = response.metadata.page_count; 
    }); 
} 

updateProducts(); // call it once when the controller is initialised 

$scope.setPage = function(page) { 
    $scope.page = page; 
    updateProducts(); // call it again after the user clicks 
} 

Просто установка $scope.page не приведет к запуску Product.query, поэтому вы должны называть это самостоятельно.