Uso angolare plug-in jQuery con oggetto nel controller esterno

Question

Sono nuovo in Angular e volevo utilizzare un jQuery Plugin (d3pie.js). Ho cercato su google il mio bisogno e ho trovato alcuni esempi che spiegano che devo creare una direttiva e inserire i miei parametri (e sinceramente è un po 'di confusione per un principiante come me).

Il mio problema è che non ho trovato come utilizzare un plugin che richiede un oggetto come argomento, sapendo che questo oggetto si trova in un altro controller?

Answer 1

Ecco un esempio che utilizza barre, un controller che ignora i dati e una direttiva con D3. Tutto questo è stato trovato usando questo link, ma l'ho leggermente modificato per uno stile di codice angolare migliore. http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives.

1. Tutta la vostra logica D3 e la presentazione deve essere contenuto in una direttiva
2. sintassi Usa HTML-dichiarativa per alimentare dei dati alle istanze direttiva
3. Così facendo, è possibile memorizzare i dati nel controller, passando al tuo direttiva D3 tramite dati a due vie vincolante dei parametri

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>