визуализация d3 круговой диаграммы в угловом с угловым-nvd3

Question

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

Я хочу, чтобы вынести круговую диаграмму d3 в угловом с angular-nvd3. У меня нет ошибок, и все связанные скрипты загружаются.

Я не знаю, как вызвать функцию внутри directive-- The поставляемой директивы:

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

, который я изменил:

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

HTML:

<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'> 

Вы назначены data контроллерам объекта, но в виду, прежде чем вы дать свой псевдоним контроллера его можно было бы назвать своим именем, поэтому, прежде чем добавить псевдоним он был MainController.data, после того, как вы добавите его, как я уже говорил до этого будет - vm.data.

Надеется, что это поможет вам

EDITED

Plunker Вот рабочему код. Ваши проблемы были:

• Вы не инициализировать угловой модуль с ng-app="yourModule"
• Вы вставили маршрутизации, но не использовать <ui-view>, чтобы сделать их знать, где он должен быть использован