Angular在外部控制器中使用jQuery插件

Question

我是Angular的新手，我想使用jQuery插件（d3pie.js）。 我GOOGLE了我的需要，我发现了几个例子，解释说我必须创建一个指令并放入我的参数（对于像我这样的初学者来说，这是一个让人困惑的问题）。

我的问题是，我没有找到如何使用需要一个对象作为参数的插件，知道这个对象是在另一个控制器？

Answer 1

这是一个使用bar的例子，它是一个控制你的数据的控制器，一个使用D3的指令。这一切都发现使用此链接，但我稍微修改它为更好的角码代码风格。 http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives。

1. 你所有的D3逻辑和表示必须包含在指令中
2. 使用HTML的声明语法数据的喂到你的指令实例
3. 通过这样做，你可以将数据存储在您的控制器，通过双向数据把它传递给你的D3指令参数

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>

结合