Question

我定义了一个App.service("ProductService", function () { var productTotalCount = {}; return { getproductTotalCount: function () { return productTotalCount; }, setproductTotalCount: function (value) { productTotalCount = value; } } });来共享两个控制器之间的变量，但是当我在控制器中设置变量然后从另一个控制器获取它时，它没有得到正确的值，这就是服务：

productTotalCount

这是我设置App.controller("ProductController", function ($scope, $http, $rootScope, ProductService) { $scope.GetAllProducts = $http.get("GetAllProductsInformation").success(function (data) { $rootScope.Products = data.Data; ProductService.setproductTotalCount(data.TotalCount); // i set productTotalCount here and it's value became 19 }); $scope.editProduct = function (data) { $scope.model = data; $rootScope.$broadcast('modalFire', data) } });的控制器：

productTotalCount

当我在此控制器中获得App.controller('Pagination', function ($scope, ProductService) { debugger; $scope.totalItems = ProductService.getproductTotalCount(); // it should return 19 but return object!! $scope.currentPage = 1; $scope.itemPerPage = 8; });时，它返回对象而不是19：

<div ng-controller="ProductController" ng-init="GetAllProducts()">

<div class="row" style="margin-top:90px" ng-show="!ShowGrid">
    <article class="widget">
        <header class="widget__header">

            <div class="widget__title">
                <i class="pe-7s-menu"></i><h3>ProductList</h3>
            </div>
            <div class="widget__config">
                <a href="#"><i class="pe-7f-refresh"></i></a>
                <a href="#"><i class="pe-7s-close"></i></a>
            </div>
        </header>

        <div class="widget__content table-responsive">

            <table class="table table-striped media-table">
                <thead style="background-color:rgba(33, 25, 36,0.1)">
                    <tr>
                        <th style="width:40%">edit</th>
                        <th style="width:30%">Price</th>
                        <th style="width:30%">ProductName</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="product in Products">
                        @*<td>{{product.ProductDescription}}</td>*@
                        <td>
                            <input class="btn btn-default" style="padding: 14px;background: rgba(0, 0, 0, 0.2)" type="submit" value="Edit" ng-click="editProduct(product)" />
                        </td>
                        <td>{{product.Price}}</td>
                        <td>{{product.ProductName}}</td>

                    </tr>
                </tbody>
              </table>
           </div>
         </article>
      </div>
    </div>

<div ng-controller="Pagination">
    <pagination total-items="totalItems" ng-change="pageChanged()" previous-text="Before" next-text="Next" first-text="First"
            last-text="Last" ng-model="currentPage" items-per-page="itemPerPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>

</div>

有什么问题？编辑：这是HTML，它可能会有所帮助：

class trx:
   def __init__(self,
                 file_name='',
                 bank='',
                 trans_type='',
                 account=''):

        self.filename = file_name
        self.bank = bank
        self.trans_type = trans_type
        self.account = account

Answer 1

从控制器名称来看，我敢打赌Pagination和ProductController控制器在调用.setproductTotalCount()方法之前或多或少地同时实例化。如果是这种情况，那么因为您在设置后将productTotalCount变量视为基本类型（而不是对象），所以更改不会反映在控制器之间。

尝试以下方法：

// Change the service to:
App.service("ProductService", function () {
    var productTotalCount = {};

    return {
        getproductTotalCount: function () {
            return productTotalCount;
        },

        setproductTotalCount: function (value) {
            productTotalCount.value = value;
        }
    }
});

// In Pagination controller:
App.controller('Pagination', function ($scope, ProductService) {
    debugger;
    $scope.totalItems = ProductService.getproductTotalCount(); // this will still be an empty object initially, but when the value is updated in the service, the $scope.totalItems will also be updated
    $scope.currentPage = 1;
    $scope.itemPerPage = 8;

    // this should confirm that changes are being propagated.
    $scope.$watch('totalItems', function(newVal) {
        console.log('totalItems updated. New Value:', newVal);
    });

    // NOTE: Keep in mind that the real productTotalCount will be stored as $scope.totalItems.value;
});

----编辑----

根据您在下面的评论，它证明上述解决方案可行。要证明这一点，请改变：

    $scope.$watch('totalItems', function(newVal) {
        console.log('totalItems updated. New Value:', newVal);
    });

到

    $scope.$watch('totalItems', function(newVal) {
        console.log('totalItems updated. New Value:', newVal);
        console.log($scope.totalItems);
    });

此时，您应该看到$ scope.totalItems已更新为：

{ value: 19 };

Answer 2

问题可能在于您如何在服务中声明变量。因为它是函数中的局部变量而不是返回的对象，所以我相信每次将服务作为依赖项注入时都会创建一个新变量。尝试使变量成为返回对象的成员。例如。

App.service("ProductService", function () {
  return {
    productTotalCount: 0, 
    getproductTotalCount: function () {
      return this.productTotalCount;
    },

    setproductTotalCount: function (value) {
      this.productTotalCount = value;
    }
  }
});

Angularjs服务不起作用

2 个答案: