角度指令テンプレートは、私はそうのように私のアプリのディレクティブを持っている...私は把握することはできません好奇心ケースを持っている角度コントローラに</p> <p>を変数

Question

を結合しませんページを読み込むと、この関数が起動します。

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'); 
    } 

これは機能します。

しかし、私は（たとえば、まだ親のコントローラではなくng-click()由来）などの関数のように、この外$ scope.cartQTotalを変更した場合：//The Number I Wantラインで

$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'); 
} 

を私が正しいを取得変数内の数字は正しいものの、私のディレクティブテンプレートは更新されません。なぜ私は理解していない。

助けてください。 （ドキュメントから）

編集：このようなダブルカール式として

観察ディレクティブ、{{式}} $時計（）メソッドを使用して レジスタリスナー。このタイプの指示文 は、式が変更されたときにいつでも通知して、 ビューを更新できるようにする必要があります。

私は疑問に思っていますが、どのようにすればディレクティブを適切に通知できますか？

EDIT 2：

がnginspector拡張子を使用して、それを見ると、それは私がcartQTotalではなく、1と2つのスコープを持って現れ、これは私が指示を持っているかどうかを一定のまま。

コントローラスコープを持ち、同じ変数を持つ重複スコープがありますが、cartQTotalが1つのスコープで変更されていて、他のスコープでは変更されていないため、非常に混乱します。重複しているが無名のコントローラスコープがあるのはなぜですか？

Answer 1

試してみてください：How do I share $scope data between states in angularjs ui-router?

基本的に私は私のui-router設定を作成していたことを実現していなかったが私のコントローラの別のインスタンス。その回答で指定されたコードを変更すると、状態を変更していなくても適切なコントローラインスタンスと通信するためのディレクティブの機能には依然として影響がありました。

Answer 2

ディレクティブ内で使用したいディレクティブの外側で操作したいデータは、バインディングを使用して渡す必要があります。どのようにあなたを示して大きい短く読むhereがあります。個人的には、方法6を最も使います。

要旨はある - あなたのディレクティブの返されたオブジェクトに追加します。

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

をそしてのようなあなたのディレクティブでそれを使用する：

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

そして、そのようににバインド：

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

Answer 3

これは、あなたの指示と$scopeとデータがupdaのコントローラ両方とも異なっています。

コントローラデータを変更するために指示文にコントローラデータを渡す必要があります。この目的のために$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; 
    });