javascript - Angular 在外部 Controller 中使用带有对象的 jQuery 插件

Question

我是 Angular 的新手，我想使用 jQuery 插件 (d3pie.js)。 我用谷歌搜索了我的需求，发现了几个例子来解释我必须创建一个指令并输入我的参数(老实说，这对像我这样的初学者来说有点困惑)。

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

Answer 1

这是一个使用 bars 的示例，它是一个存储数据的 Controller 和一个带有 D3 的指令。这都是使用此链接找到的，但我对其进行了稍微修改以获得更好的 Angular 代码样式。 http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives .

1. 您所有的 D3 逻辑和表示都必须包含在一个指令中
2. 使用 HTML 声明性语法将数据馈送到您的指令实例
3. 通过这样做，您可以将数据存储在您的 Controller 中，通过参数的双向数据绑定(bind)将其传递给您的 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>