一. 添加基本配置

  1. 添加指令

  1. angular.module('newApp')
  2. .directive('dpHighchart', ['$rootScope', function($rootScope){
  3. return {
  4. restrict: 'E',
  5. scope: {
  6. chartConfig: "="
  7. },
  8. link: function ($scope, element, $attr) {
  9. $scope.$watch('chartConfig', function (newValue, oldValue) {
  10. if (newValue) {
  11. $(element).highcharts($scope.chartConfig);
  12. }
  13. });
  14. }
  15. }
  16. }])

  2. 添加CSS样式

  1. dp-highchart {
  2. display: block;
  3. }

二. 使用方法

  1. html中添加一行。

  1. <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之replace into与 insert into duplicat key for update

    mysql实际应用中,我们在插入数据的时候,经常遇到主键冲突的情况,这是因为库中已经存在相同主键的数据,这时,我们只能更新数据:在判断是更新数据还是插入数据,我们还需要在此之前做一些必要的判断:在my ...

  2. P1334 瑞瑞的木板

    题目描述 瑞瑞想要亲自修复在他的一个小牧场周围的围栏.他测量栅栏并发现他需要N(1≤N≤20,000)根木板,每根的长度为整数Li(1≤Li≤50,000).于是,他神奇地买了一根足够长的木板,长度为 ...

  3. Javascript DOM 编程艺术(第二版)读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  4. acm练习-day1

    描述现在,有一行括号序列,请你检查这行括号是否配对.输入第一行输入一个数N(0<N<=100),表示有N组测试数据.后面的N行输入多组输入数据,每组输入数据都是一个字符串S(S的长度小于1 ...

  5. 接口与抽象类的区别-Java

    概念-抽象类: 类是对某一个对象的具体描述,抽象类则是对有共通之处的对象,描述共通之处的类;包含抽象方法的类一定的抽象类,抽象类并不一定包含抽象方法;抽象类中可以有数据成员,但数据成员必须是stati ...

  6. java死锁问题

    一.先从定义上了解一下死锁 二.从代码角度上去解释一下死锁问题 三.上述程序就是出现了死锁,我们来查看一下 1.命令如下   cmd>>jps(查看到了死锁线程所在的类,前面是PID) 2 ...

  7. android studio使用中碰到Failure [INSTALL_FAILED_OLDER_SDK] 问题

    第一次使用Android studio开发.直接新建一个默认项目运行出现:Failure [INSTALL_FAILED_OLDER_SDK] , 网上很多人说修改build.gradle中的mins ...

  8. day20-面向对象基础

    目录 面向对象基础 面向过程编程与面向对象编程 面向过程编程 面向对象编程 类与对象 类 对象 定义类和对象 定制对象独有特征 对象属性查找顺序 类与对象的绑定方法 类与数据类型 对象的高度整合 面向 ...

  9. webstom2017最新破解 ------------ http://blog.csdn.net/voke_/article/details/76418116

    webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊. 方法一:(更新时间:2018/1/23)v3.3 注册时,在打开的License ...

  10. 简单了解jdbcTemplate的queryForList是如何查询

    queryForList方法会调用query方法,同时会传入一个新的ColumnMapRowMapper对象 ArgumentPreparedStatementSetter对象只有一个Object[] ...