角度 - コントローラーオブジェクトへの指示値のバインド

Question

コントローラーから配列を渡す際に、配列の値がコントローラー内で更新されたときに、それが反映されない場合ディレクティブで。コントローラは、サービスから配列へのデータを取得し、その配列をディレクティブに渡して棒グラフを作成したいとします。私は以下のコードの重要な部分を入れました。

<div class="boxcontent" ng-show="dashCtrl.showProgress"> 
    <div class="chart-holder-lg"> 
     <canvas tc-chartjs-bar 
      chart-data="progress" 
      chart-options="options" 
      height="200" 
      auto-legend> 
     </canvas> 
    </div> 
</div> 

コントローラー：

angular 
    .module('myApp') 
    .controller('dashCtrl',['mySvc', 
    function(mySvc) { 

     var self = this; 
     this.myProgress = []; 

     this.getProgress = function() { 
      //logic must be in the service ! 
      mySvc.getProgress().then(function(success) { 
       self.myProgress = mySvc.progress; 
      }); 
     }; 
    }]); 

とディレクティブ：

angular 
.module('myApp') 
.directive('dashProgress', [function() { 
    return { 
     restrict: 'AE', 
     templateUrl: 'components/dashboard/progress.html', 
     scope: { 
      graphData: '@' 
      }, 
     link: function(scope,el,attrs) { 
      scope.progress = { 
       labels: ['Duration','Percent'], 
       datasets: [ 
        { 
        label: 'Duration', 
        data: [scope.graphData.duration] 
        }, 
        { 
        label: 'Percent', 
        data: [scope.graphData.percent] 
        }       
       ] 
      }; 
      scope.options = { }; 
     } 
    }   
}]); 

ここ

は私のトップレベルのHTML

<div dash-progress 
    graph-data="{{dashCtrl.myProgress}}"> 
</div> 
<div> 
    Other Stuff 
</div> 

ディレクティブのマイテンプレートHTMLです

コントローラのmyProgressオブジェクトの初期値を設定すると、ディレクティブに反映されますが、サービスからコントローラに返されるときに必要な実際の値は得られません。これに代えて、あなたのディレクティブの範囲で

Answer 1

、：

scope: { 
    graphData: '@' 
} 

これを使用してみてください：=とディレクティブに配列を渡すとき

scope: { 
    graphData: '=' 
} 

Answer 2

1. は{{ }}を使用しないでください。ディレクティブのスコープへの参照を渡す代わりに、ビュー内で配列をレンダリングします。
2. 私が知る限り、@は片方向バインディングであるだけでなく、1回限りのバインディングでもあり、文字列値（例：ディレクティブの初期化時にhtml属性を設定するなど）のために使用する必要があります。 @を使用する場合は、最初にデータをJSONに変換してから{{ }}というディレクティブに渡してから、ディレクティブで解析し、変更後に手動で再コンパイルする必要があります。しかし、それは少しオーバーキル、それでしょうか？

結論

だけビューから中括弧を削除し、ディレクティブのスコープに値をバインドする=を使用しています。

ビュー

<div dash-progress 
    graph-data="dashCtrl.myProgress"> 
</div> 

指令

scope: { 
    graphData: '=' 
}, 

---

更新

1つのより多くの事を試してみてください。dashCtrlでは、オブジェクト（あなたはより多くの自己説明する名前を変更することができます - これは単なる一例である）でmyProgressをラップ：ディレクティブにgraphDataを渡し、その後

this.graphData = { 
    myProgress: [] 
} 

this.getProgress = function() { 
    mySvc.getProgress().then(function(success) { 
     self.graphData.myProgress = mySvc.progress; 
    }); 
} 

：

最後に

<div dash-progress 
    graph-data="dashCtrl.graphData"> 
</div> 

、 scope.graphDataをscope.graphData.myProgressに置き換えてください。このようにして、scope.graphData.myProgressはオブジェクトのプロパティであるため常に同じデータを参照します。

これでも動作しない場合は、おそらくウォッチャーを使用して、プロパティーをscope.progressに手動で更新する必要があります。