/angularjs/

AngularJS – Example App – Part 8

2014-07-31 19:13:10

In this episod we will create auto refresh list.

1. First you have to add html with two directive. Our directive takes url to source and interval as parameters.


<div class='"row"'>
<div class='"col-xs-12"'>
<reload-list interval='"4000"' source='"app/mockdata/list/listA.json"'></reload-list>
<reload-list interval='"5000"' source='"app/mockdata/list/listB.json"'></reload-list>
</div>
</div>

2. Here you have code for directive.

angular.module('LouisApp.module.reload', [])

    .directive('reloadList', function () {
        return {
            restrict: 'E',
            scope: {
                'source': '@',
                'interval': '@'
            },
            controller: function ($scope, $http, $interval) {

                $scope.getData = function () {
                    $http({method: 'GET', url: $scope.source}).
                        success(function (data, status, headers, config) {
                            $scope.rows = {};
                            $scope.rows.config = data.config;
                            $scope.rows.rows = data.rows;

                            $scope.lastReload = new Date();
                        });
                }

                $scope.getData();

                $interval(function () {
                    $scope.getData();
                }, $scope.interval);
            },
            templateUrl: 'app/module/reload/reload-widget.tpl.html'
        };
    })
;

3. The last step. Add html for directive.


<div class='"row"'>
<div action-top-bar&quot;="" class='"col-xs-12'>
<h1>Auto refresh every {{interval}}  milliseconds</h1>
<h3 class='"pull-right"'>
            last reload: {{lastReload | date : 'H:mm:ss.sss' }}</h3>
</div>
</div>

<div class='"row"'>
<div class='"col-xs-12"'>
<div class='"panel' panel-default&quot;="">
<div class='"panel-body"'>
<list-widget data='"rows"'></list-widget>
</div>
</div>
</div>
</div>

In this example I use directive from part-7 GitHub and example