一. 添加基本配置

  1. 添加指令

angular.module('newApp')
.directive('dpHighchart', ['$rootScope', function($rootScope){
return {
restrict: 'E',
scope: {
chartConfig: "="
},
link: function ($scope, element, $attr) {
$scope.$watch('chartConfig', function (newValue, oldValue) {
if (newValue) {
$(element).highcharts($scope.chartConfig);
}
});
}
}
}])

  2. 添加CSS样式

dp-highchart {
display: block;
}

二. 使用方法

  1. html中添加一行。

<dp-highchart chart-config="chartConfig1"></dp-highchart>

  2. JS中添加一句。

  $scope.chartConfig1 = object(chart配置对象);

Angularjs中添加HighCharts的更多相关文章

  1. Angularjs中添加ckEditor插件

    使用方法看注释.主要解决帮上ngModel的问题 angular.module('newApp') .directive('ckeEditor', function() { return { /* F ...

  2. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  3. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  4. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  5. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...

  6. AngularJS中的指令全面解析(转载)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  7. 在AngularJs中怎么设置请求头信息(headers)及不同方法的比较

    在AngularJS中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/s ...

  8. 【Openlayers3】在地图上添加highcharts图表

    今天试用了一下ol3,效果很是不错! ol3中有个ol.Overlay,使用这个类我们可以在地图中添加各种html要素. 下面我们在地图中添加一个饼图 html中添加一个div容器: <div ...

  9. AngularJS中的指令

    欢迎大家讨论与指导 : )  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...

随机推荐

  1. Tomcat6和7版本对web.xml中taglib标签的配置差异

    原来部署在Tomcat6中的应用在Tomcat7中运行时报错如下错误: java.lang.IllegalArgumentException: taglib definition not consis ...

  2. EditText(2)自定义回车键的行为

    1,在android:imeOptions属性中指定要自定义的行为. 系统中有很多行为,如:搜索,完成,下一步等:actionSend,actionGo,actionNext等.下面EditText名 ...

  3. Lind.DDD.DynamicModules动态模块化的设计

    回到目录 在Lind.DDD框架里有Module,主要用于全局自动添加的模块,它类似于ABP系统里的Module,但有时过于自动化了可能使系统太死板,而有时将需要的模块手动载入可能对我们更合适,所以大 ...

  4. 《从Paxos到ZooKeeper 分布式一致性原理与实践》阅读【Leader选举】

    从3.4.0版本开始,zookeeper废弃了0.1.2这3种Leader选举算法,只保留了TCP版本的FastLeaderElection选举算法. 当ZooKeeper集群中的一台服务器出现以下两 ...

  5. Django--知识补充

    自定义标签或过滤器 渲染变量的方法(过滤器:修改数据或格式转换) {{ var | add }} {{ var | date:"Y-m" }} {{ var | safe }} 渲 ...

  6. [转] Android利用Fiddler进行网络数据抓包

    主要介绍Android及IPhone手机上如何利用Fiddler进行网络数据抓包,比如我们想抓某个应用(微博.微信.墨迹天气)的网络通信请求就可以利用这个方法. Mac 下请使用 Charles 代替 ...

  7. python自动化--接口请求及封装

    基于http协议,最常用的是GET和POST两种方法. 接口文档需要包含哪些信息: 接口名称接口功能接口地址支持格式 json/xml请求方式请求示例请求参数(是否必填.数据类型.传递参数格式)返回参 ...

  8. NX自动出图 (更新啦)

    1.创建模板类零件图纸 2.创建顶针类零件图纸 3.创建镶件类零件图纸 4.自动创建孔表

  9. 你的宽带ip地址被100.64了吗?

    你的宽带ip地址被100.64了吗?   最近需要用外网的时候发现,宿舍路由wan口的ip变成了100.64.X.X,本以为是一个外网的ip,可事实上并不是,并且从外网无法直接访问.   首先,我们都 ...

  10. 模块挂载、切换,uml模式、流程图模式

    模块挂载.切换,uml模式.流程图模式