диаграмма с Angular.js и D3

Question

Я пытаюсь сделать диаграмму с angular.js, но диаграмма не появляется на странице, код работает при запуске html-страницы без out.js, но когда пользователь route.js отображается пустая страница Это мой код.

var myapp = angular.module('myapp', ['angularCharts']); 
    function D3Controller($scope) { 

console.log("Entering Scope"); 

$scope.config = { 
    title: 'Products', 
    tooltips: true, 
    labels: false, 
    mouseover: function() { 
    }, 
    mouseout: function() { 
    }, 
    click: function() { 
    }, 
    legend: { 
     display: true, 
     //could be 'left, right' 
     position: 'right' 
    } 
} 
console.log("And here we are in $scope." + $scope.config.title); 
; 

$scope.data = { 
    series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'], 
    data: [{ 
      x: "Laptops", 
      y: [100, 500, 0], 
      tooltip: "this is tooltip" 
     }, { 
      x: "Desktops", 
      y: [300, 100, 100] 
     }, { 
      x: "Mobiles", 
      y: [351] 
     }, { 
      x: "Tablets", 
      y: [54, 0, 879] 
     }] 


} 
console.log("And here we are in $scope.data.sereis" + $scope.data.series); 
; 

} 

rout.js

'use strict'; 

    myappApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) { 
     $routeProvider 
      .when('/d3', { 
       templateUrl: 'views/d3/d3.html', 
       controller: 'D3Controller', 

       access: { 
        authorizedRoles: [USER_ROLES.all] 
       } 
      }) 
    }); 

HTML страницы

<div ng-controller="D3Controller" > 
    <div id="d3-chart" style="width: 100%; height: 500px; padding: 0px; position: relative;"> 
       <div 
        data-ac-chart="'bar'" 
        data-ac-data="data" 
        data-ac-config="config" 
        class="chart"> 
       </div> 
       <input ng-model="config.title" style="width: 100%;"/> 
       <br> 
       <input ng-model="data.series" style="width: 100%;"/> 
       <br> 
       <input ng-model="data.data" style="width: 100%;"/> 
      </div> 
     </div> 

Может ли один помочь мне, пожалуйста?

Answer 1

Вы не зарегистрировали свой D3Controller в любом месте своего кода, но ссылаетесь на него как на строку при объявлении маршрута.

Чтобы устранить эту проблему, если D3Controller находится в том же объеме, как myApp.config использовать голое имя функции D3Controller вместо строки "D3Controller".

В противном случае, зарегистрировать контроллер с вашим приложением:

myApp.controller('D3Controller', D3Controller);