学习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. 用Qemu模拟vexpress-a9 （四） --- u-boot引导kernel，用nfs挂载根文件系统

    环境介绍 Win7 64 + Vmware 11 + ubuntu14.04 32 u-boot 版本:u-boot-2015-04 Linux kernel版本:linux-3.16.y busyb ...

  2. SecureCRT 使用技巧

    VanDyke CRT 和 VanDyke SecureCRT是最常用的终端仿真程序,简单的说就是windows下登录UNIX或Liunx服务器主机的软件.二者不同的是SecureCRT支持SSH∗( ...

  3. [学习嵌入式开发板]iTOP-4412实现NFS网络文件系统

    本文转自迅为:http://www.topeetboard.com 学习平台:iTOP-4412开发板 本文讲解如何在 iTOP-4412 开发板上实现 NFS 网络文件系统. 我们使用的软硬件环境是 ...

  4. Linux shell basic2 cat find tr

    Cat stands for concatenate. Case 1. When the text files have more blank lines, we want to remove the ...

  5. ASP.NET URL伪静态重写实现方法

    ASP.NET URL伪静态重写实现方法 首先说下,ASP.NET URL伪静态只是将~/a_1.html指向到了~/a.aspx?ID=1,但a.aspx还是真实存在的,你不用./a_1.html来 ...

  6. UVA 12532 Interval Product

    线段树水题,忽略每个数的大小,只记住他们的正负即可,规规矩矩的代码.不过这是我第一次完全自己写的一次A的代码了.纪念一下... #include <iostream> #include & ...

  7. [3d跑酷] Xcode5 打包 发布配置

    主题 Unity导出Xcode项目,使用Xocde打包ipa并提交到AppStore xcode发布配置 1.设置发布相关参数,比如 包名,版本,证书,ios设备版本 2.设置体系结构,支持的平台(I ...

  8. java spring 框架学习

    1. ibm spring 入门系列 https://www.ibm.com/developerworks/cn/java/wa-spring1/ https://www.ibm.com/develo ...

  9. 爆炸吧 js dom ---------> boom

    dom-> html css 事件 元素 eventlistener HTML 事件的例子: 当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提交 ...

  10. 安装grunt

    1,npm install -g grunt-cli 2,npm install grunt --save 作为项目的依赖安装 这两步必不可少