angularjs - Angular - 范围变量没有正确更新

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

您可能需要调用 $scope.$apply()

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自己，所以你必须自己调用它。