外部コントローラにオブジェクトを含む角度使用jQueryプラグイン

Question

私はAngularを初めて使用しています.jQueryプラグイン（d3pie.js）を使いたいと思います。 私は私の必要性を探りました。私はディレクティブを作成してパラメータを入れなければならないことを説明する例はほとんど見つかりませんでした（そして、私のような初心者のためにちょっと混乱します）。

私の問題は、このオブジェクトが他のコントローラにあることを知って、オブジェクトを引数として必要とするプラグインを使用する方法を見つけられなかったことです。

Answer 1

ここでは、バーを使用した例を示します。コントローラーはデータをホールドし、ディレクティブはD3を使用します。これはすべてこのリンクを使って見つけられましたが、より良い角度コードスタイルのために少し修正しました。 http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives。

1. は、あなたのすべてのD3ロジックとプレゼンテーションは、
2. 使用HTML-宣言構文は、あなたのコントローラにデータを格納することができ、あなたのディレクティブインスタンスそうすることにより、
3. にデータを供給するためのディレクティブの中に含まれている必要がありますパラメータ

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>

の結合双方向のデータを介して、あなたのD3ディレクティブに渡します