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

这是一个问题：How do I share $scope data between states in angularjs ui-router?

基本上我没有意识到我的ui-router配置正在创建我的控制器的单独实例。更改我在该答案中指定的代码使其能够正常工作，即使我没有改变状态，它仍然影响指令与正确的控制器实例通信的能力。

Answer 3

您希望在指令之外使用的数据应该使用绑定传递。有一个很好的简短阅读here，告诉你如何。就个人而言，我最常使用方法6。

要点是 - 你添加到指令的返回对象：

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

然后在你的指令中使用它：

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

然后绑定到它：

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

角度指令模板不绑定到角度控制器变量

3 个答案: