学习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. Android ANR分析

    1.发生anr时手机会生产traces文件 拉取trace文件:adb pull data/anr/traces.txt ./mytraces.txt 保存路径 参考

  2. Ubuntu 14.04（32位）安装Oracle 11g（32位）全过程

    1.将系统更新到最新:sudo apt-get updatesudo apt-get dist-upgrade2.安装Oracle所需的依赖包:sudo apt-get install automak ...

  3. linux command intro2 vi

    vi cusor : 0 : to the beginning of the current line $ : to the end of the current line G : to the la ...

  4. Hive2 jdbc test

    package andes; import java.io.BufferedWriter; import java.io.FileOutputStream; import java.io.IOExce ...

  5. Hadoop 数据库 - HBase

    转自:http://blog.csdn.net/iAm333 1 什么是HBase? HBase,是Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统.使用HBas ...

  6. mac os利用xampp实现apache下的cgi

    折腾了两天终于把问题解决了,mac os是10.10.3..够新了吧 系统原生的apache配置cgi老是配不好,突然发现xampp也有macos版的,准备下下来试试. 安装完成后,打开apache服 ...

  7. SSH框架总结（框架分析+环境搭建+实例源码下载） 《转》

    这篇文章比较易懂,易理解: 首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层W ...

  8. 什么是Activity

    Activity 的生命周期是被以下的函数控制的.public class Activity extends ApplicationContext {      protected void onCr ...

  9. java 15-10 List的三个子类的特点

    List:(面试题List的子类特点) ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高. Vector: 底层数据结构是数组,查询快,增删慢. 线程安全,效率低. Li ...

  10. 原生js颗粒页换图效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...