一. 添加基本配置

  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. 记录一次mysql导入千万条测试数据过慢的问题!

    数据库在没有做任何优化的情况下,使用存储过程,插入1千万条测试数据. CREATE PROCEDURE addmaxdata(IN n int) BEGIN DECLARE i INT DEFAULT ...

  2. JSON基础 JS操作JSON总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  3. Objective-C设计模式——外观Faced(接口适配)

    外观模式 外观设计模式和适配器差不多,不过它门对对象控制的粒度不同,适配器一般只是控制一个系统和客户端的对接.外观则是用来抽象多个系统一起工作. 外观一般具有多个子系统,所以外观应持有多个子系统的引用 ...

  4. bootstrap3无间距栅格/grid no-gutter

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 计算机二级C语言冲刺笔记。

    2018-03-0618:32:26 风萧萧兮易水寒,壮士一去...... 四级依旧没过,计算机二级接踵而至, default语句在switch语句中可以省略,所以B错误:switch语句中并非每个c ...

  6. 安卓TV盒子常见问题以及解决方法

    1.为什么requestfocus无效 原因:requestfocus不支持在Touch模式下的Focus; 解法方案:再加一个requestFocusFromTouch函数. 2.摄像头打开问题,调 ...

  7. hashtable的用法

    C#中哈希表(HashTable)的用法详解 1.  哈希表(HashTable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器 ...

  8. python学习笔记(3)——进制符号&转换公式

    进制转换法则: 进制符号  bin().oct().hex().int('',进制)+待转格式数 10进制→其他进制 # dec2bin # 十进制 to 二进制: bin() >>> ...

  9. Java_数组1_16.5.12

    声明整型数组a: int[] a; 这时,只声明了变量a,还应该使用new运算符创建数组: int[] a=new int [100];(数组长度不要求是一个常量:new int[n]会创建一个长度为 ...

  10. 梦想CAD控件安卓参数绘图

    在CAD绘图中,参数化绘图可以帮助我们极大缩短设计时间,用户可以按照设计意图控制绘图对象,这样即使对象发生了变化,具体的关系和测量数据仍将保持不变,能够对几何图形和标注进行控制,可以帮助用户应对耗时的 ...