angular例子筆記 - diligenceday－IT工程師數位筆記本

文章出處

　　學習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>