Tuesday, January 10, 2017

107 Ionic Auto Scroll With $Watch Function

Using $scope.$watch()

1) Continue From Previous Tutorial.

http://basic-steps.blogspot.my/2017/01/107-ionic-auto-scroll.html

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">


<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

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

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:

http://codepen.io/notarazi/pen/egaqwv

DEMO:

See the Pen 107 Ionic Auto Scroll Bottom by notarazi (@notarazi) on CodePen.

REFERENCES:

https://www.bennadel.com/blog/2852-understanding-how-to-use-scope-watch-with-controller-as-in-angularjs.htm

http://www.learn-angular.org/#!/lessons/watch

http://stackoverflow.com/questions/15112584/how-do-i-use-scope-watch-and-scope-apply-in-angularjs

https://forum.ionicframework.com/t/how-to-make-the-sccollbar-of-content-element-scroll-down-to-the-bottom-automatically/393/6

Basic Steps

Labels

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Tuesday, January 10, 2017

107 Ionic Auto Scroll With $Watch Function

1) Continue From Previous Tutorial.

2) Add Demo Codes.

No comments:

Post a Comment

...