更新された値がサービスから送信された後でディレクティブが更新されない

Question

ディレクティブ内にカウンタ値を表示する際に問題が発生しました。

私は、アプリケーションが読み込まれるときに一度だけ読み込まれるヘッダーディレクティブがあるカートアプリケーションで作業しています。私はウィッシュリストに追加してカートに追加するための2つのリンク/ボタンを備えた製品のリストを持っています。

シナリオ：私はウィッシュリストで製品を追加していた場合

、私は私のコントローラからその製品オブジェクトを取得し、私はサービスウィッシュリスト配列にそのオブジェクトをプッシュしていたサービスでそれを送ります。次に、ウィッシュリスト配列内のオブジェクトの数を数え、サービス変数にキャッシュするループを実行しています（私は$ rootScopeを使用していません）。私はこの更新されたウィッシュリストの配列数を返すために別のサービス関数を使用しています。このディレクティブの内部では、このサービス関数を使用して更新されたカウントを取得しています。

問題：

ウィッシュリストアレイカウントは私がほしい物リスト配列内の製品を追加していたびに更新されます。しかし、ビューに更新された値が表示されていません。

Answer 1

あなたがサービスを利用したい場合は、その後 Jsfiddle link

JSコード

var app = angular.module('myApp', []); 

    app.controller('ctrl', function($scope, myservice) { 
    $scope.data = myservice.data; 
    $scope.add = function() { 
     myservice.add('test'); 
    } 
    }); 

    app.controller('ctrl2', function($scope, myservice) { 
    $scope.cart = myservice; 
    }); 

    app.directive('myDir', function() { 
    return { 
     restrict: 'EA', 
     template: '<span>my dir Count {{cart.data.length}}</span>' 
    } 
    }); 

    app.directive('myDir1', function(myservice) { 
    return { 
     restrict: 'EA', 
     template: '<span>my dir1 Count {{data.get().length}}</span>', 
     scope: {}, 
     link: function(scope) { 
     scope.data = myservice; 
     } 
    } 
    }); 

    app.service('myservice', function() { 
    this.data = []; 
    this.add = function(item) { 
     this.data.push(item); 
    }; 
    this.get = function() { 
     return this.data; 
    }; 
    return this; 
    }); 

HTMLコード

<div ng-app='myApp'> 
    <div ng-controller='ctrl'> 
    CTRL 
    <button ng-click='add()'> 
     Add to wishlist 
    </button> 
    Data :{{data}} 
    </div> 
    <hr> 
    <div ng-controller='ctrl2'> 
    Count {{cart.data.length}} 
    <br> Count {{cart.get().length}} 
    </div> 
</div> 

あなたが得ることができるこの方法以下のようにその参照変数を使用して参照してください。サービス内の任意の場所のアプリケーションデータ