学习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. django安装和卸载

    一.pip安装 安装: apt-get update apt-get install python-pip pip install django==1.4.20 卸载: pip uninstall d ...

  2. UEditor For ASP.Net Core Use Qiniu

    UEditor For ASP.Net Core Use Qiniu 此项目为UEditor提供文件管理; 后端服务使用 ASP.Net Core; 使用七牛提供的云存储; 项目地址 https:// ...

  3. 【Ext.Net学习笔记】01：在ASP.NET WebForm中使用Ext.Net

    Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...

  4. UVALive 6168 Fat Ninjas --二分小数+搜索

    题意:一个NxN的网格地板,有一些激光束从天花板垂直射向地面的某个网格,一个圆要安全地从左走到右,不碰到上边界,下边界以及激光束,问这个圆的直径最大能达到多大. 分析:可以二分直径,关键在check函 ...

  5. SPOJ AMR12A The Black Riders --二分+二分图最大匹配

    题意:有n个人,m个洞.每个洞能容纳一个人,每个人到每个洞需要花费一些时间.每个人到达一个洞后可以花C的时间来挖一个洞,并且最多挖一个洞,这样又能多容纳一人.求能使至少K个人进洞的最短时间. 解法:看 ...

  6. MySQL数据库学习笔记（十二）----开源工具DbUtils的使用（数据库的增删改查）

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  7. JavaWeb学习----http协议

    一.什么是HTTP协议: 1.概念: 客户端连上web服务器后,若想获得web服务器中的某个web资源,需遵守一定的通讯格式,HTTP协议用于定义客户端与web服务器通迅的格式(规定客户端和服务器如何 ...

  8. Unity CombineChildren和MeshCombineUtility

    原理 Unity3D如何通过CombineChildren和MeshCombineUtility优化场景? 首先解释下联结的原理和意思:文档里说,显卡对于一个含100个面片的物体的和含1500个面片的 ...

  9. scroll滚动条插件初始化问题

    一种特殊场景下是滚动条容器先隐藏,点击某个东西后显示出来.然后实例化滚动条.实例 js: var flag = true; document.getElementById('btn1').onclic ...

  10. poj2407

    欧拉函数裸题. 欧拉函数:在数论,对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目. 欧拉函数的定义: E(N)= (  区间[1,N-1] 中与 N 互质的整数个数). 对于 积性函数 F ...