mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(ionic): remove all delegates
BREAKING CHANGE: $ionicScrollDelegate, $ionicSlideBoxDelegate, and
$ionicSideMenuDelegate have been removed.
- $ionicScrollDelegate has been changed to $ionicScrollController.
Documentation:
[ionContent](
http://ajoslin.github.io/docs/nightly/api/directive/ionContent),
[ionScroll](
http://ajoslin.github.io/docs/nightly/api/directive/ionScroll)
Change your code from this:
```html
<ion-content ng-controller="MyCtrl">
<button ng-click="scrollBottom()">Scroll to bottom!</button>
</ion-content>
```
```js
function MyCtrl($scope, $ionicScrollDelegate) {
$scope.scrollBottom = function() {
$ionicScrollDelegate.scrollBottom();
};
}
```
To this:
```html
<!-- optional attr controller-bind, see docs -->
<ion-content ng-controller="MyCtrl">
<button ng-click="scrollBottom()">Scroll to bottom!</button>
</ion-content>
```
```js
function MyCtrl($scope) {
$scope.scrollBottom = function() {
$scope.$ionicScrollController.scrollBottom();
};
}
```
- $ionicSideMenuDelegate has been changed to
$ionicSideMenusController. Documentation:
[ionSideMenus](http://ajoslin.github.io/docs/nightly/api/directive/ionSideMenus)
Change your code from this:
```html
<ion-side-menus>
<ion-side-menu side="left">Side Menu Left</ion-side-menu>
<ion-pane ion-side-menu-content ng-controller="MyCtrl">
<button ng-click="toggleLeftMenu()">
Toggle Left Menu!
</button>
</ion-pane>
</ion-side-menus>
```
```js
function MyCtrl($scope, $ionicSideMenuDelegate) {
$scope.toggleLeftMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
```
To this:
```html
<!-- optional attr controller-bind, see documentation -->
<ion-side-menus>
<ion-side-menu side="left">Side Menu Left</ion-side-menu>
<ion-pane ion-side-menu-content ng-controller="MyCtrl">
<button ng-click="toggleLeftMenu()">
Toggle Left Menu!
</button>
</ion-pane>
</ion-side-menus>
```
```js
function MyCtrl($scope) {
$scope.toggleLeftMenu = function() {
$scope.$ionicSideMenuController.toggleLeft();
};
}
```
- $ionicSlideBoxDelegate has been removed and upgraded to
$ionicSlideBoxController. It had only one method that
was unneeded. [Documentation](
http://ajoslin.github.io/docs/nightly/api/directive/ionSlideBox)
This commit is contained in:
@@ -6,15 +6,36 @@ angular.module('ionic.ui.scroll')
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
.controller('$ionicScroll', ['$scope', 'scrollViewOptions', '$timeout', '$ionicScrollDelegate', '$window', function($scope, scrollViewOptions, $timeout, $ionicScrollDelegate, $window) {
|
||||
.factory('$$scrollValueCache', function() {
|
||||
return {};
|
||||
})
|
||||
|
||||
.controller('$ionicScroll', [
|
||||
'$scope',
|
||||
'scrollViewOptions',
|
||||
'$timeout',
|
||||
'$window',
|
||||
'$$scrollValueCache',
|
||||
'$location',
|
||||
'$parse',
|
||||
'$rootScope',
|
||||
'$document',
|
||||
function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $location, $parse, $rootScope, $document) {
|
||||
|
||||
var self = this;
|
||||
|
||||
var element = this.element = scrollViewOptions.el;
|
||||
var $element = this.$element = angular.element(element);
|
||||
var scrollView = this.scrollView = new ionic.views.Scroll(scrollViewOptions);
|
||||
|
||||
this.$scope = $scope;
|
||||
$scope.$parent.$$ionicScrollController = this;
|
||||
//Attach self to element as a controller so other directives can require this controller
|
||||
//through `require: '$ionicScroll'
|
||||
//Also attach to parent so that sibling elements can require this
|
||||
($element.parent().length ? $element.parent() : $element)
|
||||
.data('$$ionicScrollController', this);
|
||||
|
||||
$parse(scrollViewOptions.controllerBind || '$ionicScrollController')
|
||||
.assign($scope.$parent, this);
|
||||
|
||||
if (!angular.isDefined(scrollViewOptions.bouncing)) {
|
||||
ionic.Platform.ready(function() {
|
||||
@@ -22,42 +43,107 @@ angular.module('ionic.ui.scroll')
|
||||
});
|
||||
}
|
||||
|
||||
var $element = this.$element = angular.element(element);
|
||||
|
||||
//Attach self to element as a controller so other directives can require this controller
|
||||
//through `require: '$ionicScroll'
|
||||
$element.data('$$ionicScrollController', this);
|
||||
|
||||
//Register delegate for event handling
|
||||
$ionicScrollDelegate.register($scope, $element, scrollView);
|
||||
|
||||
var resize = angular.bind(scrollView, scrollView.resize);
|
||||
$window.addEventListener('resize', resize);
|
||||
|
||||
$scope.$on('$viewContentLoaded', function(e, historyData) {
|
||||
if (e.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
//only the top-most scroll area under a view should remember that view's
|
||||
//scroll position
|
||||
e.preventDefault();
|
||||
|
||||
var values = historyData && historyData.rememberedScrollValues;
|
||||
if (values) {
|
||||
$timeout(function() {
|
||||
scrollView.scrollTo(+values.left || null, +values.top || null);
|
||||
}, 0, false);
|
||||
}
|
||||
$scope.$on('$destroy', function() {
|
||||
historyData && (historyData.rememberedScrollValues = scrollView.getValues());
|
||||
});
|
||||
});
|
||||
// set by rootScope listener if needed
|
||||
var backListenDone = angular.noop;
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
$window.removeEventListener('resize', resize);
|
||||
backListenDone();
|
||||
if (self._rememberScrollId) {
|
||||
$$scrollValueCache[self._rememberScrollId] = scrollView.getValues();
|
||||
}
|
||||
});
|
||||
|
||||
this.setRefresher = function(refresherScope, refresherElement) {
|
||||
$element.on('scroll', function(e) {
|
||||
var detail = (e.originalEvent || e).detail || {};
|
||||
$scope.$onScroll && $scope.$onScroll({
|
||||
event: e,
|
||||
scrollTop: detail.scrollTop || 0,
|
||||
scrollLeft: detail.scrollLeft || 0
|
||||
});
|
||||
});
|
||||
|
||||
$scope.$on('$viewContentLoaded', function(e, historyData) {
|
||||
//only the top-most scroll area under a view should remember that view's
|
||||
//scroll position
|
||||
if (e.defaultPrevented) { return; }
|
||||
e.preventDefault();
|
||||
|
||||
var viewId = historyData.viewId;
|
||||
|
||||
self.rememberScrollPosition(viewId);
|
||||
self.scrollToRememberedPosition();
|
||||
|
||||
backListenDone = $rootScope.$on('$viewHistory.viewBack', function(e, fromViewId, toViewId) {
|
||||
//When going back from this view, forget its saved scroll position
|
||||
if (viewId === fromViewId) {
|
||||
self.forgetScrollPosition();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$timeout(function() {
|
||||
scrollView.run();
|
||||
});
|
||||
|
||||
this._rememberScrollId = null;
|
||||
this.rememberScrollPosition = function(id) {
|
||||
if (!id) {
|
||||
throw new Error("Must supply an id to remember the scroll by!");
|
||||
}
|
||||
this._rememberScrollId = id;
|
||||
};
|
||||
this.forgetScrollPosition = function() {
|
||||
delete $$scrollValueCache[this._rememberScrollId];
|
||||
this._rememberScrollId = null;
|
||||
};
|
||||
this.scrollToRememberedPosition = function(shouldAnimate) {
|
||||
var values = $$scrollValueCache[this._rememberScrollId];
|
||||
if (values) {
|
||||
scrollView.scrollTo(+values.left, +values.top, shouldAnimate);
|
||||
}
|
||||
};
|
||||
|
||||
this.resize = function() {
|
||||
return $timeout(resize);
|
||||
};
|
||||
this.scrollTop = function(shouldAnimate) {
|
||||
this.resize().then(function() {
|
||||
scrollView.scrollTo(0, 0, !!shouldAnimate);
|
||||
});
|
||||
};
|
||||
this.scrollBottom = function(shouldAnimate) {
|
||||
this.resize().then(function() {
|
||||
var max = scrollView.getScrollMax();
|
||||
scrollView.scrollTo(max.left, max.top, !!shouldAnimate);
|
||||
});
|
||||
};
|
||||
this.scrollTo = function(left, top, shouldAnimate) {
|
||||
this.resize().then(function() {
|
||||
scrollView.scrollTo(left, top, !!shouldAnimate);
|
||||
});
|
||||
};
|
||||
this.anchorScroll = function(shouldAnimate) {
|
||||
this.resize().then(function() {
|
||||
var hash = $location.hash();
|
||||
var elm = hash && $document[0].getElementById(hash);
|
||||
if (hash && elm) {
|
||||
var scroll = ionic.DomUtil.getPositionInParent(elm, self.$element);
|
||||
scrollView.scrollTo(scroll.left, scroll.top, !!shouldAnimate);
|
||||
} else {
|
||||
scrollView.scrollTo(0,0, !!shouldAnimate);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this._setRefresher = function(refresherScope, refresherElement) {
|
||||
var refresher = this.refresher = refresherElement;
|
||||
var refresherHeight = self.refresher.clientHeight || 0;
|
||||
scrollView.activatePullToRefresh(refresherHeight, function() {
|
||||
@@ -71,10 +157,6 @@ angular.module('ionic.ui.scroll')
|
||||
refresherScope.$onRefresh();
|
||||
});
|
||||
};
|
||||
|
||||
$timeout(function() {
|
||||
scrollView.run();
|
||||
});
|
||||
}]);
|
||||
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user