角度指令模板未綁定到角度控制器變量

Question

我有一個奇怪的案例，我不知道...

我的應用程式上有指令，如下所示：

app.directive('cartTotal', function() {
  return {
    template: "<i ui-sref='cart' class='fa fa-shopping-basket'></i><span class='items'>@{{cartQTotal.total}}</span>"
  };
});

當我加載頁面時，此函數將觸發：

if(localStorage.getItem("cart") != null)
    {
        console.log("makeacart");
        var cart = JSON.parse(localStorage.getItem("cart"));
        $scope.cartQTotal.total = 0;
        for(i=0;i<cart.length;i++)
        {
            $scope.cartQTotal.total += cart[i].cartQ;
        }
        $('.fixed-cart').animateCss('bounce');
    }

這可行。

但是，如果在此之外修改$ scope.cartQTotal，例如在函數中（仍在父控制器中，但從ng-click()派生），例如：

$scope.add2Cart = function(name){
var cart =  JSON.parse(localStorage.getItem("cart"));
        for(var zz = 0;zz<cart.length;zz++)
    {
        if(cart[zz].item == name)
        {
            console.log("already in cart");
            $('.fixed-cart').animateCss('bounce');
            return;
        }
    }
        cart.push({item:name,cartQ:1});
        localStorage.setItem("cart", JSON.stringify(cart));
        console.log("makeacartii");
        $scope.cartQTotal.total = 0;
        for(i=0;i<cart.length;i++)
        {
            $scope.cartQTotal.total += cart[i].cartQ;
        }
        console.log($scope.cartQTotal.total);//THE NUMBER I WANT
        $('.fixed-cart').animateCss('bounce');
}

在//The Number I Want行上，我得到了正確的數字，因為在變量中正確，但是我的指令模板沒有更新。 我不明白為什么不這樣做。

請協助。

編輯（來自文檔）：

觀察指令（例如雙卷曲表達式{{expression}}）使用$ watch（）方法注冊偵聽器。 每當表達式更改時，都需要通知此類指令，以便它可以更新視圖。

所以我想問題是如何正確通知指令？

編輯2：

使用nginspector擴展查看它，似乎我有兩個帶有cartQTotal作用域，而不是一個，無論我是否有該指令，這個作用域都保持不變。

我很困惑，因為我有我的控制器作用域，然后有一個具有所有相同變量的重復作用域，但cartQTotal在一個作用域中發生了變化，而在另一個作用域中沒有發生變化。 為什么會有重復但未命名的控制器作用域？

Answer 1

這是因為您的指令和$scope和用於更新數據的控制器都不同。

因此，您需要將控制器數據傳遞給指令，以便對其進行修改。 為此，您可以使用$broadcast （但請確保您了解它，因為在大型應用程序中，使用它不是一個好習慣）。

所以試試這個控制器

 cart.push({item:name,cartQ:1});
        localStorage.setItem("cart", JSON.stringify(cart));
        console.log("makeacartii");
        $scope.cartQTotal.total = 0;
        for(i=0;i<cart.length;i++)
        {
            $scope.cartQTotal.total += cart[i].cartQ;
        }
        console.log($scope.cartQTotal.total);//THE NUMBER I WANT
        $('.fixed-cart').animateCss('bounce');

       $rootScope.$broadcast("cartUpdated",$scope.cartQTotal);

指示

$scope.$on('eventEmitedName', function(event, data) {
    $scope.cartQTotal = data;
  });

Answer 2

正如這里闡明的那樣，這是一個問題： 如何在angularjs ui-router中的狀態之間共享$ scope數據？

基本上，我沒有意識到我的ui-router配置正在創建控制器的單獨實例。 按照該答案中的說明更改我的代碼可以使其正常工作，即使我沒有更改狀態，它仍然影響了指令與適當的控制器實例進行通信的能力。

Answer 3

您希望在指令外使用的，在指令外操作的數據應使用綁定傳遞。 有讀了簡短這里 ，告訴您如何。 我個人最常使用方法6。

要點是-您將添加到指令的返回對象中：

    scope: {
        yourVariable: '=', //use =? for optional variables
    }

然后像這樣在您的指令中使用它：

<span>{{your-variable}}</span>

並這樣綁定：

<my-directive your-variable="myControllerVariable"></my-directive>