学习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. uva 297 quadtrees——yhx

    Quadtrees  A quadtree is a representation format used to encode images. The fundamental idea behind ...

  2. 随机序列生成算法---生成前N个整数的一组随机序列

    问题描述: 给定输入N,生成从1开始的:1,2,3,4,......N 一组随机序列,序列中的数不能重复出现. 比如:N=5,合法的随机序列为{4,3,1,5,2} .{3,1,4,2,5}……非法的 ...

  3. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  4. Chrome浏览器与常用插件推荐

    Chrome浏览器与常用插件推荐 官方chrome下载:http://www.google.cn/chrome/ 提示:需要FQ才能安装. 1,AdBlock 谷歌屏蔽广告: https://chro ...

  5. codeforces 484D D. Kindergarten(dp)

    题目链接: D. Kindergarten time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  6. POJ 2449 Remmarguts' Date --K短路

    题意就是要求第K短的路的长度(S->T). 对于K短路,朴素想法是bfs,使用优先队列从源点s进行bfs,当第K次遍历到T的时候,就是K短路的长度. 但是这种方法效率太低,会扩展出很多状态,所以 ...

  7. Android中Adapter之BaseAdapter使用

    Android界面中有时候需要显示稍微复杂的界面时,就需要我们自定义一个adapter,而此adapter就要继承BaseAdapter,重新其中的方法.         Android中Adapte ...

  8. Android系列之Fragment（四）----ListFragment的使用

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

  9. jstat使用

    jstat -gcutil pid 统计gc信息统计.其中最后五项,分别是young gc的次数,young gc的时间,full gc的次数,full gc的时间,gc的总时间.

  10. 23Spring_JdbcTemplate来实现单表的增删改查

    第一步建表: