Angular verwenden jQuery Plugin mit Objekt in externen Controller

Question

Ich bin neu in Angular und ich wollte ein jQuery Plugin (d3pie.js) verwenden. Ich googelte meine Bedürfnisse und ich fand einige Beispiele, die erklären, dass ich eine Direktive erstellen und meine Parameter eingeben muss (und ehrlich gesagt, es ist ein bisschen verwirrend für einen Anfänger wie mich).

Mein Problem ist, dass ich nicht gefunden habe, wie man ein Plugin benutzt, das ein Objekt als Argument benötigt, wissend, dass dieses Objekt in einem anderen Controller ist?

Answer 1

Hier ist ein Beispiel mit Balken, ein Controller, der Ihre Daten hostet und eine Direktive mit D3. Dies wurde alles mit diesem Link gefunden, aber ich habe es für einen besseren Winkelcode-Stil etwas modifiziert. http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives.

1. Alle Ihre D3 Logik und Präsentation müssen innerhalb einer Richtlinie
2. Verwenden Sie HTML-deklarative Syntax füttern von Daten zu Ihrer Richtlinie Instanzen
3. Dadurch, dass enthalten sein, die Daten in dem Controller gespeichert werden kann, Leiten über zwei~~POS=TRUNC-Daten auf Ihre D3 Richtlinie von Parametern Bindung

angular.module('myApp', []) 
 
    .controller('BarsController', function($scope) { 
 
    $scope.myData = [10,20,30,40,60, 80, 20, 50]; 
 
    }) 
 
    //camel cased directive name 
 
    //in your HTML, this will be named as bars-chart 
 
    .directive('barsChart', function ($parse) { 
 
    //explicitly creating a directive definition variable 
 
    //this may look verbose but is good for clarification purposes 
 
    //in real life you'd want to simply return the object {...} 
 
    var directiveDefinitionObject = { 
 
     //We restrict its use to an element 
 
     //as usually <bars-chart> is semantically 
 
     //more understandable 
 
     restrict: 'E', 
 
     //this is important, 
 
     //we don't want to overwrite our directive declaration 
 
     //in the HTML mark-up 
 
     replace: false, 
 
     //our data source would be an array 
 
     //passed thru chart-data attribute 
 
     scope: {data: '=chartData'}, 
 
     link: function (scope, element, attrs) { 
 
     //in D3, any selection[0] contains the group 
 
     //selection[0][0] is the DOM node 
 
     //but we won't need that this time 
 
     var chart = d3.select(element[0]); 
 
     //to our original directive markup bars-chart 
 
     //we add a div with out chart stling and bind each 
 
     //data entry to the chart 
 
     chart.append("div").attr("class", "chart") 
 
      .selectAll('div') 
 
      .data(scope.data).enter().append("div") 
 
      .transition().ease("elastic") 
 
      .style("width", function(d) { return d + "%"; }) 
 
      .text(function(d) { return d + "%"; }); 
 
     //a little of magic: setting it's width based 
 
     //on the data value (d) 
 
     //and text all with a smooth transition 
 
     } 
 
    }; 
 
    return directiveDefinitionObject; 
 
    });

.chart { 
 
    background: #eee; 
 
    padding: 3px; 
 
} 
 

 
.chart div { 
 
    width: 0; 
 
    transition: all 1s ease-out; 
 
    -moz-transition: all 1s ease-out; 
 
    -webkit-transition: all 1s ease-out; 
 
} 
 

 
.chart div { 
 
    font: 10px sans-serif; 
 
    background-color: steelblue; 
 
    text-align: right; 
 
    padding: 3px; 
 
    margin: 5px; 
 
    color: white; 
 
    box-shadow: 2px 2px 2px #666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="BarsController"> 
 
    <bars-chart chart-data="myData" ></bars-chart> 
 
</div>