0

当我独立运行angular-d3plus时（请注意 angular-d3plus 在 js 中也使用 'use strict' 指令），它运行良好。但是，当我尝试将其作为现有 angularJS 应用程序的一部分（通过 JHipster 生成）时，一旦它尝试绘制使用 angular-d3plus 指令的视图，我就会在 chrome 的开发人员控制台中看到 strictdi 错误；

angular.js:13920 Error: [$injector:strictdi] controller is not using explicit annotation and cannot be invoked in strict mode

我按照以下简单步骤进行此集成（在安装凉亭并在我的 index.html 中添加与 d3 相关的 js 文件之后）

我在我的应用程序中添加了“angular-d3plus”模块

angular
    .module('myapp', [
        ...,
        'angular-d3plus',
        ...
    ])
    .run(run);

我的控制器代码是；

(function() {
'use strict';

angular
    .module('myapp')
    .controller('myappController', myappController);
myappController.$inject = ['$translate', '$timeout'];

function myappController ($translate, $timeout) {
    var vm = this;
    vm.charttype="box";

    vm.base_data = [
      {"year": 1991, "name":"alpha", "value": 15, "group": "black"},
      {"year": 1991, "name":"beta", "value": -10, "group": "black"},
      {"year": 1991, "name":"gamma", "value": 5, "group": "black"}
    ];
}
})();

在我看来，我的 angular-d3plus 指令是（对于上面的控制器）；

<d3plus-box data="vm.base_data" id='name' y="value" x="year" ng-show="vm.charttype=='box'" ></d3plus-box>
</div>

当我取出上面的代码行时，其他一切都很好。我试过这篇文章从指令中取出控制器代码（编辑 angular-d3plus js），但没有用。当将 angular-d3plus 演示的 angularjs 版本更改为 1.5.8（与我的应用程序相同）时，我也尝试并没有观察到错误。任何帮助将非常感激！

EDIT1：根据@mariomol 的建议编辑指令。

4

2 回答 2

0

问题是，如果您使用控制器作为名称，您必须：

  1. 制作html标签时使用vm.base_data和vm.charttype
  2. 如果您在 html 中导入 Controller，请执行ng-controller="Controller as vm"

这是一个工作示例：

http://codepen.io/mariomol/pen/NbpKXP?editors=1111

最好的

于 2016-11-20T22:21:51.200 回答
0

为了解决这个问题，我不得不从指令中取出控制器功能

d3plusBox.$inject = ["angularD3plusUtils"];
function d3plusBox(angularD3plusUtils) {
    console.log('d3plusBox entered');
    return {
        restrict: 'AE',
        scope: angularD3plusUtils.scope({
            data: '=',
            id: '@',
            x: '@',
            y: '@',
            size: '@?'
        }),
        template: angularD3plusUtils.template,
        link: angularD3plusUtils.link,
        controller: d3PlusBoxContr
    };
}

d3PlusBoxContr.$inject = ["angularD3plusUtils", "$scope", "$element"]

function d3PlusBoxContr(angularD3plusUtils, $scope, $element) {
    angularD3plusUtils.controller($scope, $element, 'box');
}
于 2016-11-22T20:33:25.590 回答