角度-nvd3私は<a href="https://github.com/krispo/angular-nvd3/blob/master/README.md" rel="nofollow">angular-nvd3</a>と角度で、D3の円グラフを描画したい

Question

https://plnkr.co/edit/vE5Km2?p=preview

と角度で、D3の円グラフをレンダリングします。エラーはなく、関連するすべてのスクリプトがロードされています。私はdirective-- 供給ディレクティブの内部で関数を呼び出すするかどうかはわかりません

は次のとおりです。

<nvd3 options='vm.options' data='vm.data'></nvd3> 

HTML：：

Iに変更

<nvd3 options='options' data='data'></nvd3> 

<div ng-controller='MainController'> 
    <nvd3 options='vm.options' data='vm.data'></nvd3> 
    </div> 

main.controller：

(function (angular) { 
    'use strict'; 
    angular 
     .module('blah').controller('MainController', MainController); 

    function MainController() { 
     var vm = this; 

     vm.initSampleData = initSampleData; // set up the var 

     function initSampleData() { 
      vm.options = { 
       'chart': { 
        'type': 'pieChart', 
        'height': 500, 
        'showLabels': true, 
        'duration': 500, 
        'labelThreshold': 0.01, 
        'labelSunbeamLayout': true, 
        'legend': { 
         'margin': { 
          'top': 5, 
          'right': 35, 
          'bottom': 5, 
          'left': 0 
         } 
        } 
       } 
      }; 

      vm.data = [ 
       {key: 'One', y: 5}, 
       {key: 'Two', y: 2}, 
       {key: 'Three', y: 9}, 
       {key: 'Four', y: 7}, 
       {key: 'Five', y: 4}, 
       {key: 'Six', y: 3}, 
       {key: 'Seven', y: .5} 
      ]; 
     } 
    } 

})(window.angular); 

ルート（角2.0の準備、ディレクティブを使用していない）私は MainRoute $の注入を追加する場合= [ '$ routeProvider'、 'nvd3'];それはエラーです...

function MainRoute($routeProvider){ 
     $routeProvider.when('/', { 
      controller: 'MainController as vm', 
      templateUrl : 'main.html', 
      bindToController: false 
     }); 
    } 

Answer 1

私はコントローラにエイリアスを作成する必要があると思うし、あなたの問題を解決します。

<div ng-controller='MainController as vm'> 

あなたはエイリアスを追加する前に私が述べたようにあなたがそれを追加した後、それは、MainController.dataだったので、それは、自身の名前で呼ばれることができ、あなたのコントローラの別名を与える前に、あなたは、コントローラにdataをオブジェクトに割り当てられますが、ビュー内それ以前は - vm.dataです。

は、それはあなた

コードを働いてここで

あるPlunker編集するのに役立ちます願っています。あなたがplunkerを提供することができ、

• はあなたがルーティングを挿入ng-app="yourModule"
• と角度のモジュールを初期化しなかったが、彼らはそれが