angular.js - 如何将d3(js库)与angular同使用?
本文介绍了angular.js - 如何将d3(js库)与angular同使用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我想用angular封装一个指令,将d3.js画图的功能写进去。
首先我仿照网上的例子,将d3.js用factory包了起来,js文件命名为d3.js
然后我在 directive.js文件中把d3.js绘制柱状图封装:
之后在页面中引用了指令
最后再app.js中注入了依赖如图:
现在有些报错如下:
请教如何解决这个问题呢。哪里出了问题?angular新手,请大家在各方面指教。。
解决方案
看你代码的组织结构应该是没有使用到模块管理,那么就先引入d3,直接使用即可,没必要将d3在套一层,也不方便以后的升级
<script src="lib/d3.js"></script>
<script src="lib/angular.js"></script>
直接使用
angular.module('myApp.directive', [])
.constant('d3',d3)
.directive('d3Bars', function (d3) {
return {}
});
angular.module('myApp', ['myApp.directive'])
.controller(function () {
});
如果可以的话,建议你最好将画图的逻辑同你的业务分离,另抽出一个模块,例如
angular.module('ngD3', [])
.constant('d3',d3)
.directive('d3Bars', function (d3) {
return {}
});
说不定你以后就贡献了一个牛逼的图库了
这篇关于angular.js - 如何将d3(js库)与angular同使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文