Angular.js和D3的圖表

Question

我嘗試使用angular.js制作圖表，但該圖表無法在頁面中消失，當在沒有rout.js的情況下運行html頁面但當用戶rout.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與D3Controller處於同一范圍內， myApp.config使用函數D3Controller的裸名代替字符串"D3Controller" 。

否則，請向您的應用程序注冊控制器：

myApp.controller('D3Controller', D3Controller);