Angular 将 jQuery 插件与外部控制器中的对象一起使用
Angular use jQuery plugin with object in external controller
我是 Angular 的新手,我想使用 jQuery 插件 (d3pie.js)。
我用谷歌搜索了我的需求,发现了几个例子来解释我必须创建一个指令并输入我的参数(并且说实话,这对像我这样的初学者来说有点混乱)。
我的问题是我没有找到如何使用需要对象作为参数的插件,知道这个对象在另一个控制器中?
这里是一个使用 bars 的例子,一个存储你的数据的控制器和一个带有 D3 的指令。这些都是使用 link 找到的,但我稍微修改了它以获得更好的 angular 代码风格。 http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives.
- 您的所有 D3 逻辑和表示都必须包含在一个指令中
- 使用 HTML 声明式语法将数据馈送到您的指令实例
- 通过这样做,您可以将数据存储在您的控制器中,通过参数的双向数据绑定将其传递给您的 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>
我是 Angular 的新手,我想使用 jQuery 插件 (d3pie.js)。 我用谷歌搜索了我的需求,发现了几个例子来解释我必须创建一个指令并输入我的参数(并且说实话,这对像我这样的初学者来说有点混乱)。
我的问题是我没有找到如何使用需要对象作为参数的插件,知道这个对象在另一个控制器中?
这里是一个使用 bars 的例子,一个存储你的数据的控制器和一个带有 D3 的指令。这些都是使用 link 找到的,但我稍微修改了它以获得更好的 angular 代码风格。 http://odiseo.net/angularjs/proper-use-of-d3-js-with-angular-directives.
- 您的所有 D3 逻辑和表示都必须包含在一个指令中
- 使用 HTML 声明式语法将数据馈送到您的指令实例
- 通过这样做,您可以将数据存储在您的控制器中,通过参数的双向数据绑定将其传递给您的 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>