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);