尝试在 AngularJS 应用程序中使用 angular-d3plus 时出现严格错误答案

【问题标题】：strictdi error when trying to use angular-d3plus in AngularJS app尝试在 AngularJS 应用程序中使用 angular-d3plus 时出现严格错误
【发布时间】：2016-11-23 04:33:25
【问题描述】：

当我独立运行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

我按照以下简单步骤进行此集成（在安装 bower 并在我的 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>

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

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

【问题讨论】：

标签： angularjs jhipster d3plus

【解决方案1】：

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

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

这是一个工作示例：

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

最好的

【讨论】：

感谢您的回复，当然我错过了非常明显的。更正了它，但仍然没有改进，并且抛出了同样的错误。

【解决方案2】：

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

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

【讨论】：