angular例子笔记

　　

　　学习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>

 

posted @ 2014-12-17 17:54  方方和圆圆  阅读(526)  评论(0)  编辑  收藏  举报

再过一百年， 我会在哪里？