strictdi Fehler beim Versuch, angular-d3plus in AngularJS App zu verwenden

Question

Wenn ich angular-d3plus unabhängig ausführen (bitte beachten Sie eckig-d3plus verwendet auch 'Use strikte' Direktive in js), es funktioniert gut. Aber als ich versuchte, es Teil meiner bestehenden angularJS-Anwendung (generiert durch JHipster) zu machen, sehe ich strictdi Fehler in der Entwicklerkonsole von Chrome, sobald es versucht, zu zeichnen, wo Winkel-d3plus Direktive verwendet wird;

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

Ich folgte unter einfachen Schritten für diese Integration (nach Bower installieren und das Hinzufügen von d3 verwandten js Dateien in meinem index.html)

Ich habe 'Winkel d3plus' Modul in meiner app

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

Mein Controller-Code ist;

(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"} 
    ]; 
} 
})(); 

meine eckige-d3plus-Direktive ist meiner Ansicht nach (für obige Controller);

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

, wenn ich oben Codezeile nehmen, funktioniert alles völlig in Ordnung. Ich habe versucht, this post Controller-Code aus der Direktive (Editing eckig-d3plus js) herauszunehmen, aber von keinem Nutzen. Ich habe auch versucht und beobachtet keinen Fehler, wenn angularjs Version von eckigen-d3plus-Demo auf 1.5.8 (wie meine Anwendung) geändert. Jede Hilfe würde wirklich geschätzt werden!

EDIT1: editierte Direktive in Sicht nach @mariomol Vorschlag.

Answer 1

Um dies zu lösen, hatte ich von der Richtlinie Reglerfunktion nehmen

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

Answer 2

Die Sache ist, wenn Sie Controller Als Namen verwenden, müssen Sie:

1. Wenn die Verwendung HTML-Tag machen vm.base_data und vm.charttype
2. Wenn Sie Controller-Import in html tun ng-controller="Controller as vm"

Hier ein Arbeitsbeispiel:

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

beste