mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
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)
106 lines
3.7 KiB
JavaScript
106 lines
3.7 KiB
JavaScript
describe('bar directives', function() {
|
|
beforeEach(module('ionic'));
|
|
|
|
describe('barHeader tapScrollToTop', function() {
|
|
function setup() {
|
|
var el;
|
|
inject(function($compile, $rootScope) {
|
|
el = angular.element('<div class="bar-header">')
|
|
el.data('$$ionicScrollController', {
|
|
scrollTop: jasmine.createSpy('scrollTop')
|
|
});
|
|
ionic.requestAnimationFrame = function(cb) { cb(); };
|
|
$compile(el)($rootScope.$new());
|
|
$rootScope.$apply();
|
|
});
|
|
return el;
|
|
}
|
|
it('should listen for tap, unlisten on destroy', function() {
|
|
var callback;
|
|
spyOn(ionic, 'on').andCallFake(function(name, cb) {
|
|
callback = cb;
|
|
});
|
|
spyOn(ionic, 'off');
|
|
var el = setup();
|
|
expect(ionic.on).toHaveBeenCalledWith('tap', jasmine.any(Function), el[0]);
|
|
expect(ionic.off).not.toHaveBeenCalled();
|
|
el.scope().$destroy();
|
|
expect(ionic.off).toHaveBeenCalledWith('tap', callback, el[0]);
|
|
});
|
|
it('should ignore tap if it\'s in a button', function() {
|
|
var el = setup();
|
|
spyOn(ionic.DomUtil, 'rectContains');
|
|
var child = angular.element('<div class="button">');
|
|
el.append(child);
|
|
ionic.trigger('tap', { target: child[0] }, true, true);
|
|
expect(ionic.DomUtil.rectContains).not.toHaveBeenCalled();
|
|
});
|
|
it('should scrollTop if tap is inside headerBar', function() {
|
|
var el = setup();
|
|
spyOn(ionic.DomUtil, 'rectContains').andCallFake(function() {
|
|
return true;
|
|
});
|
|
ionic.trigger('tap', { target: el[0], touches: [{pageX:0,pageY:0}] });
|
|
expect(el.controller('$ionicScroll').scrollTop).toHaveBeenCalledWith(true);
|
|
});
|
|
it('should not scrollTop if tap isnt inside headerBar', function() {
|
|
var el = setup();
|
|
spyOn(ionic.DomUtil, 'rectContains').andCallFake(function() {
|
|
return false;
|
|
});
|
|
ionic.trigger('tap', { target: el[0], touches: [{pageX:0,pageY:0}] });
|
|
expect(el.controller('$ionicScroll').scrollTop).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
angular.forEach([{
|
|
tag: 'ion-header-bar',
|
|
element: 'header',
|
|
controllerBind: '$ionicHeaderBarController'
|
|
}, {
|
|
tag: 'ion-footer-bar',
|
|
element: 'footer',
|
|
controllerBind: '$ionicFooterBarController'
|
|
}], function(data) {
|
|
describe(data.tag, function() {
|
|
|
|
function setup(attrs) {
|
|
var el;
|
|
ionic.views.HeaderBar = function(opts) {
|
|
this.opts = opts;
|
|
this.align = jasmine.createSpy('align');
|
|
};
|
|
inject(function($compile, $rootScope) {
|
|
el = angular.element('<'+data.tag+' '+(attrs||'')+'>');
|
|
el = $compile(el)($rootScope.$new());
|
|
$rootScope.$apply();
|
|
});
|
|
return el;
|
|
}
|
|
|
|
it('should compile to ' + data.element, function() {
|
|
var el = setup();
|
|
expect(el[0].tagName.toLowerCase()).toBe(data.element);
|
|
});
|
|
|
|
it('should assign views.HeaderBar to default controllerBind', function() {
|
|
var el = setup();
|
|
expect(el.scope()[data.controllerBind] instanceof ionic.views.HeaderBar).toBe(true);
|
|
});
|
|
it('should assign views.HeaderBar to attr controllerBind', function() {
|
|
var el = setup('controller-bind="monkeys"');
|
|
expect(el.scope().monkeys instanceof ionic.views.HeaderBar).toBe(true);
|
|
});
|
|
|
|
it('should pass center to views.HeaderBar option by default', function() {
|
|
var el = setup();
|
|
expect(el.scope()[data.controllerBind].opts.alignTitle).toBe('center');
|
|
});
|
|
it('should pass attr.alignTitle to views.HeaderBar', function() {
|
|
var el = setup('align-title="left"');
|
|
expect(el.scope()[data.controllerBind].opts.alignTitle).toBe('left');
|
|
});
|
|
});
|
|
});
|
|
});
|