学习angular的插件写法和制作;

<!DOCTYPE html>

<html ng-app="APP">

<head>

    <meta charset="UTF-8">

    <title>angular-refresh example</title>

    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>

</head>

<body ng-controller="ExampleController">

    <angular-refresh

        url="http://filltext.com/?rows=10&fname={firstName}&lname={lastName}&callback=JSON_CALLBACK"

          ng-model="people"

          interval="5000"

          method="jsonp">

    </angular-refresh>

     <ul ng-repeat="person in people">

       <li>{{person.fname}} {{person.lname}}</li>

     </ul>

     <!--

      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

     -->

    <script>

                       //直接依赖这个datarefresh模块;

    angular.module("APP",["datarefresh"]).

        controller("ExampleController",['$scope',function($scope){

    }]);

    </script>

    <script>

    angular.module('datarefresh', [])

.directive('angularRefresh', ['$parse', '$timeout', '$http', function ($parse, $timeout, $http) {

    return {

        //E为tag类型, A为属性, C应该是注释;

        restrict: 'E',

        //template的元素肯定要一个总元素;

        template: '<div></div>',

        /*

          这个元素相当于是配置..一点用处都没有;

        */

        replace: true,

        link: function (scope, element, attrs) {

          console.log(element);

          var isRunning = true;

          var method = 'get';

          var url = '';

          function successFunction(data) {

            if (data !== undefined && isRunning) {

              try {

                /*

                $parse(attrs.ngModel).assign返回的是一个闭包;

                这个语句相当于执行 :

                  1 : scope.people = data;

                  2 : scope.$apply()

                */

                $parse(attrs.ngModel).assign(scope, data);

              }

              catch (error) {

                //Just in case scope got detroyed while we were trying to update

                console.log(error);

              }

            }

            if (isRunning) {

              $timeout(function () { refreshFromUrl(url, interval); }, interval);

            }

          }

          function refreshFromUrl(url, interval) {

            if (isNaN(interval)) {

              interval = 2000;

            };

            //通过$http的方式获取JSONP的数据;

            $http[method](url).success(function (data, status, headers, config) {

              //对数据整理;

              successFunction(data);

            })

            .error(function (data, status, headers, config) {

              console.log(data);

            });

          }

          //通过各种方式获取配置验证是否为空;

          if (attrs.ngModel !== undefined && attrs.ngModel !== '' && attrs.url !== undefined && attrs.url !== '')

          {

              //获取间隔刷新的时间;

              var interval = parseInt(attrs.interval);

              if(isNaN(interval))

                  interval = 2000;

              //获取请求方式;

              if(attrs.method !== undefined && attrs.method !== '') {

                if(attrs.method.toLowerCase() == 'get' || attrs.method.toLowerCase()=='jsonp') {

                  method = attrs.method.toLowerCase();

                }

              }

              //配置url;

              url = attrs.url;

              refreshFromUrl(url, interval);

          }

          scope.$on('$destroy', function () {

              isRunning = false;

          });

        }

    }

}]);

    </script>

</body>

</html>

angular例子笔记的更多相关文章

  1. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  2. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  3. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  4. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  5. Angular复习笔记7-路由（下）

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

  6. Angular复习笔记7-路由（上）

    Angular复习笔记7-路由(上) 关于Angular路由的部分将分为上下两篇来介绍.这是第一篇. 概述 路由所要解决的核心问题是通过建立URL和页面的对应关系,使得不同的页面可以用不同的URL来表 ...

  7. Angular复习笔记6-依赖注入

    Angular复习笔记6-依赖注入 依赖注入(DependencyInjection)是Angular实现重要功能的一种设计模式.一个大型应用的开发通常会涉及很多组件和服务,这些组件和服务之间有着错综 ...

  8. angular复习笔记4-模板

    Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...

  9. angular学习笔记，很乱哈哈。

    1.鼠标悬浮出现的信息v-bind:title="message" 2.对该便签进行结果判断显示隐藏v-if=''控制台设置 app3.seen = false(消失).控制台设置 ...

随机推荐

  1. Solr Dataimporthandler 导入MySQL 内存溢出。

    最近准备把一千九百多万数据导入Solr中,在以前测试数据只有一两百万,全量导入没有任务问题.但是,换成一千九百万数据时,solr报内存异常(java.lang.OutOfMemoryError:GC ...

  2. 【NOIP合并果子】uva 10954 add all【贪心】——yhx

    Yup!! The problem name reects your task; just add a set of numbers. But you may feel yourselvesconde ...

  3. html之大白

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 算法分析 Analysis of Algorithms -------GeekforGeeker 翻译

    算法分析 Analysis of Algorithms 为什么要做性能分析?Why performance analysis? 在计算机领域有很多重要的因素我们要考虑 比如用户友好度,模块化, 安全性 ...

  5. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  6. HDU 1576 A/B【扩展欧几里德】

    设A/B=x,则A=Bx n=A%9973=A-9973*y=Bx-9973*y 用扩展欧几里德求解 #include<stdio.h> #include<string.h> ...

  7. Facebook或成云领域黑马 冲击亚马逊

    [摘要]目前,云计算领域最大的服务是亚马逊AWS,据称此服务年度营收约为100亿美元. 转播到腾讯微博 BI中文站 3月22日报道 如今,多数人认为亚马逊在云计算领域的发展势头无人可档,不过,这个市场 ...

  8. android ant 自动编译打包

    http://www.cnblogs.com/tankaixiong/archive/2010/11/24/1887156.html

  9. jquery的children方法和css3选择器配合使用

    $(".pid").children("ul:nth-child(2)");//获取拥有pid类元素下的第二个ul元素 $(".pid"). ...

  10. 分布式监控系统Zabbix-3.0.3-完整安装记录（5）-邮件报警部署

    前面几篇陆续介绍了zabbix3.0.3监控系统的部署和监控项配置,今天这里分享下zabbix3.0.3的邮件报警的配置过程~由于采用sendmail发送邮件,常常会被认为是垃圾邮件被拒,所以不推荐这 ...