模型中的工厂值未更新..我做错了什么

我是angular-js的新手。我有两个控制器（欢迎控制器，产品控制器），并且都在工厂内处理相同的模型。

当模型由一个控制器（产品控制器）更新时，它应该反映另一个控制器中的更新。（欢迎）

但它现在没有发生。

网页代码：

 <body ng-app="myApp">
<div ng-controller="welcomeContoller">
  {{totalProductCnt}}
</div>
<div ng-controller="productController">
  <div class="addRemoveCart">
    <span class="pull-left glyphicon glyphicon-minus" ng-click="removeProduct()"></span>
    <span class="pull-right glyphicon glyphicon-plus" ng-click="addProduct(1)"></span>
  </div>
</div>

JS代码

var myApp = angular.module("myApp", ['ui.bootstrap']);
myApp.factory("productCountFactory", function() {
  return {
    totalProducts:0
  };
});
myApp.controller("welcomeContoller", function($scope, productCountFactory) 
{
  $scope.totalProductCnt = productCountFactory.totalProducts;
});
 myApp.controller("productController", function($scope, productCountFactory) {
   $scope.addProduct = function() {
productCountFactory.totalProducts++;
alert(productCountFactory.totalProducts);
     };
  $scope.removeProduct = function() {
     if(productCountFactory.totalProducts >=1)
         productCountFactory.totalProducts--;
        alert(productCountFactory.totalProducts);
     };
    });

即使在 addProduct 被稱為 totalProductCnt 後，它也會顯示為零。我想显示每个增量的值。

普伦克链接

将工厂对象引用放在作用域上：

myApp.controller("welcomeContoller", function($scope, productCountFactory) {
    $scope.productCountFactory = productCountFactory;
});

监视对象的属性。

  {{productCountFactory.totalProducts}}

PLNKR上的演示。

通过在作用域上放置引用，观察程序在每个摘要周期中查找属性的值，并在发生更改时更新 DOM。

来自 welcomeController 的 totalProductCnt 不会更新，因为它在创建控制器时只分配一次。

您可以使用多种解决方案来刷新显示的值。在工厂为您的总产品使用吸气剂：

myApp.factory("productCountFactory", function() {
    var totalProducts = 0;
    return {
        getTotalProducts: function() {
            return totalProducts;
        },
        addProduct: function() {
            totalProducts++;
        },
        removeProduct: function() {
            totalProducts--;
        }
    };
});
myApp.controller("welcomeContoller", function($scope, productCountFactory) {
    $scope.getTotalProducts = productCountFactory.getTotalProducts;
});
myApp.controller("productController", function($scope, productCountFactory) {
    $scope.addProduct = function() {
        productCountFactory.addProduct();
    };
    $scope.removeProduct = function() {
        if (productCountFactory.getTotalProducts() >= 1)
            productCountFactory.removeProduct();
    };
});

并相应地更新视图：

<div ng-controller="welcomeContoller">
  {{getTotalProducts()}}
</div>

普伦克链接

相关内容

最新更新

热门标签：