Labels

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Tuesday, January 10, 2017

107 Ionic Auto Scroll With $Watch Function


.
107 Ionic Auto Scroll With $Watch Function
Using $scope.$watch()

1) Continue From Previous Tutorial.

2) Add Demo Codes.

HTML
<html>
 <head>
   <meta charset="utf-8">
   <title>Diary</title>
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
   <!-- Internal Library
   <link href="lib/ionic/css/ionic.css" rel="stylesheet">
   <script src="lib/ionic/js/ionic.bundle.js"></script>
   -->
   <!-- Cloud Library -->
   <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
   <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
   <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
   <script src="cordova.js"></script>
 </head>
   <body ng-app="app">
 <div>
 <div>
   <ion-nav-bar class="bar-stable">
     <ion-nav-back-button></ion-nav-back-button>
   </ion-nav-bar>
   <ion-nav-view></ion-nav-view>
 </div>
</div>
 
    <script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">

 <ion-content padding="true" class="has-header">
          <ion-scroll delegate-handle="autoscrollview" style="height: 100px;">
                    <ul>
                               <li ng-repeat="item in items">{{item}}</li>
                 </ul>
            </ion-scroll>
</ion-content>
</ion-view>
   </script>  
     
 </body>
</html>
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope','$timeout','$ionicScrollDelegate',
function ($scope,$timeout,$ionicScrollDelegate) {
          $scope.items = ['1', '2', '3'];
          var counter = $scope.items.slice(-1)[0];
         
          function addItem(){
            $scope.items.push(++counter);
//$ionicScrollDelegate.$getByHandle('autoscrollview').scrollBottom();         
            $timeout(addItem, 1000);
          }
         
          $timeout(addItem, 1000);
    $scope.$watch( "items", function(newValue, oldValue) {
    $ionicScrollDelegate.$getByHandle('autoscrollview').scrollBottom();      
  }, true);
}])
   
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state('home', {
    url: '/page1',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })
$urlRouterProvider.otherwise('/page1')
});
CODEPEN:
DEMO:
See the Pen 107 Ionic Auto Scroll Bottom by notarazi (@notarazi) on CodePen.
REFERENCES:


.

No comments:

Post a Comment