尝试在 AngularJS 应用程序中使用 angular-d3plus 时出现 strictdi 错误

Question

当我运行 angular-d3plus独立时（请注意angular-d3plus在js中也使用'use strict'指令），效果很好。但是当我试图让它成为我现有的 angularJS 应用程序（通过 JHipster 生成）的一部分时，我在 chrome 的开发者控制台中看到 strictdi 错误，只要它试图在 angular 处绘制视图使用-d3plus 指令；

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>

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

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

Answer 1

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

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

这是一个工作示例：

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

最佳

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

尝试在 AngularJS 应用程序中使用 angular-d3plus 时出现 strictdi 错误

strictdi error when trying to use angular-d3plus in AngularJS app

angularjs

jhipster

d3plus