[英]Angular use jQuery plugin with object in external controller
I'm new to Angular and I wanted to use a jQuery Plugin (d3pie.js). 我是Angular的新手,我想使用jQuery插件(d3pie.js)。 I googled my need and I found few examples that explain that I have to create a directive and put in my parameters (and to be sincere it's a little bit confusing for a beginner like me). 我搜索了我的需求,并且我找到了一些例子来解释我必须创建一个指令并输入我的参数(并且真诚地对于像我这样的初学者来说有点混乱)。
My problem is that I didn't find how to use a plugin that requires an object as argument, knowing that this object is in an other controller ? 我的问题是我没有找到如何使用一个需要一个对象作为参数的插件,知道这个对象在另一个控制器中?
Here is an example using bars, a controller that hods your data and a directive with D3. 下面是一个使用条形图的示例,一个用于控制数据的控制器和一个使用D3的指令。 This was all found using this link but I modified it slightly for better angular code style. 这都是使用此链接找到的,但我稍微修改了它以获得更好的角度代码样式。 http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives . http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives 。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.