javascript - 仅调用一次 Controller 功能，两个 div 具有相同的 Controller

Question

我正在研究angularjs。我有两个 div 共享同一个 Controller 。我的 Controller 代码是。

var app=angular.module('categoryPageApp', []);
app.controller('NgProducts', function($scope,UpdateService) {

   $scope.orderby=5;
   $scope.pageNumber=1;
   $scope.loadProducts=function($scope){
             //here goes ajax call
     };

 });

我的两个具有相同 Controller 的 div 是

<div ng-app="categoryPageApp">
<div id="cat-products" ng-controller="NgProducts">
</div>
<div id="brand-filter" ng-controller="NgProducts">
</div>
</div>

正如我们所看到的，现在所有变量将被声明两次，并且更新函数将被调用。 我不希望这种情况发生，因为单次 http 调用就可以完成工作。有没有解决这个问题的方法。

我还想使用 Angular js 为我的产品构建分页器。任何帮助将不胜感激。

Answer 1

您可以尝试在加载产品后存储一些标志，如下所示:

app.controller('NgProducts', function($scope,UpdateService) {
   if (!$scope.productsAreLoaded)
     $scope.orderby=5;
     $scope.pageNumber=1;
     $scope.loadProducts=function($scope){
        //here goes ajax call
        $scope.productsAreLoaded = true;
     };

});