Question

我正在使用Angular.js建立一个基本的电子商务界面。

基本上我想在点击添加到购物车按钮时弹出主导航栏中添加的购物车div。这是使用mainNavbar指令控制器中的click1变量完成的。

我有一个顶部导航栏的控制器，用作自定义指令

app.directive('mainNavbar',function(){
return {
restrict:'E',
templateUrl:'partials/nav.html',
controller:'navController',
link:function(scope,element)
{
   scope.$watch('click1',function(value){
   if(value==1)
   {
      $('#cart').css('display','block');
   }
   else 
   {
      $('#cart').css('display','none');
   }
   });
 }
};
});

app.controller("navController",function($scope,thefactory,$q,$routeParams)
{
    $scope.count=0;
    $scope.click1=0;
    $scope.cart_amt=0;
    $scope.cartdata=[];
    $scope.showcrt=function()
    {
        $scope.cart_amt=thefactory.cart_amt;
        var i=0;
        while(i<thefactory.prods.length)
        {
            $scope.cartdata[i]=thefactory.prods[i];
            i++;  
         }
         thefactory.setcartval(1);
         $scope.click1=1;
     };
    $scope.hidecart=function()
    {
        $scope.click1=0;
        thefactory.setcartval(0);
    };
    $scope.$watch('thefactory', function (newVal,oldVal,scope)
    {
       if (typeof newVal == 'undefined') {

       }
       else
       {
          if(newVal.getcartval()==1)
          {
              scope.showcrt();
          }
          if(newVal.numcartelem>oldVal.numcartelem)
          {
              scope.count=newVal;
          }
      }
   });
  });

工厂

app.factory('thefactory',function($http,$q)
{
   var factory={};
   factory.products=[];
   factory.cart_amt=0;
   factory.prods=[];
   factory.numcartelem=0;
   var showcart=0;
   factory.getcartval=function()
   {
      return showcart;
   };
   factory.setcartval=function(a)
   {
      showcart=a;
   };
   factory.addprod2cart=function(a,b,c,d)
   {
      factory.cart_amt+=c;
      factory.numcartelem++;
      factory.prods.push({'heading':a,'seller':b,'price':c,'img':d});
   };
   return factory;
});

和另一个用于将产品添加到购物车的控制器。

app.controller("productController", function($scope,thefactory,$q,$routeParams)
{
    $scope.data=[];
    $scope.product_id = $routeParams.productId;
    $scope.data=thefactory.products[$scope.product_id-1];
    $scope.addcart=function(a,b,c,d)
    {
       console.log("Add to cart called!");
       thefactory.addprod2cart(a,b,c,d);
    };
});

现在，问题是，即使在productController中调用了add to cart函数，也无法在navController中调用工厂对象上的监视，而productController必须调用工厂addprod2cart函数并更改工厂对象。我确信工厂对象已被修改，因为如果我单击导航栏中的购物车按钮，我会看到更新的对象。但是，关于那个物体的手表并不起作用。请为此建议一个解决方案。谢谢！

Answer 1

我认为问题在于表达方式。

尝试将thefactory添加到范围

$scope.thefactory = thefactory;
$scope.$watch('thefactory', function (newVal,oldVal,scope) {}, true);

或

$scope.$watch(function(){
    return thefactory;
}, function (newVal,oldVal,scope) { }, true);

观察工厂对象无法在自定义指令的控制器中工作

1 个答案: