- $ionicLoading: stop race condition with show and hide (eb1dee93, closes #1100)
- $ionicPopup:
- active: Taps/clicks now use .activated instead of .active, closes #913 (870dcd6f)
- checkbox:
- header: Header input too long on Android 4.2, closes #1081 (b654e02e)
- ion-scroll:
- ionContent: do not let child scopes inherit has-* classes (a5eb48b9, closes #924)
- ionHeaderBar: make it align after elements properly load (d00aaa59)
- ionInfiniteScroll:
- ionNavBar: adjust has-header if ionNavBar is hidden (41b73abf, closes #927)
- ionNavButtons: multiple ionNavButtons elements align correctly (58de2671, closes #930)
- ionRefresher: do not animate pulling-text (5c893ab8, closes #909)
- ionTab: make sure all tab-nav attributes are re-interpolated on change (757f1819, closes #955, #1071)
- ionView: do not set navbar title if no title attr set (d53eab81, closes #915)
- ionicTabBar: detect if matches state in all cases (ee2b7686)
- item:
- labels: Fix .input-label's width for androids w/out full flex box support, #998 (096a01c1)
- navClear:
- popup: Backwards compatible remove popup from DOM, closes #851 (441a21c4)
- range: Fix range being able to slide when in a side menu, closes #318 (2fbdebcd)
- refresher: get rid of flickers except on droid-4.4 (ad671848, closes #1014)
- scroll:
- scss: make tabs,header,footer aligned right with statusbar (c2a38a6d)
- tap:
- Do not preventDefault after input focus, #1068 (a977332f)
- Remove 300ms delay when tapping select elements (cf686548)
- Prevent clicks from firing after scrolling, #579 (cb602b58)
- Deactivate elements during scroll at the same time click is ignored, #997 (3ee5ea77)
- Do not simulate a click if it was from a touchcanel event, closes #1015 (78510099)
- Prevent multiple clicks when overriding cordova object, closes #1022 (5f3a1d21)
- Prevent "clicking" when scrolling (f3bd258c)
- Increate isScrolledSinceStart from 2px radius to 15px, #970 (9a49129a)
- $ionicModal:
- $ionicNavBarDelegate:
- $ionicScrollDelegate: add scrollBy(left,top,animate) to delegate (f847c208, closes #987)
- $ionicSideMenuDelegate:
- avatar: Adding .item-avatar-left and deprecating .item-avatar (9bac6050)
- grid: Added .row-baseline and .row-stretch (e0e7a83b)
- ionCheckbox: allow ng-disabled attribute (d2e54a82, closes #939)
- ionContent: don't wrap in a .scroll element if scroll="false" (73da93d4, closes #841)
- ionNavBar: make back button animated (97257938, closes #1030)
- ionSlideBox: add pager-click attribute (d6c960c2, closes #785)
- loading: Moved loading scss to its own file and added variables, closes #984 (e3491864)
- select: Styled select elements, both inline and as a list item (8a12f2d1)
- $ionicPopup.show()'s button onTap function has changed.
When using $ionicPopup.show()
, previously a button's onTap function
would only result in closing the popup and resolving the promise if the
onTap(event)
function returned a truthy value.
Now, a button's onTap event will always close the popup and resolve
the popup's promise, no matter the return value, by default. The only
way to prevent the popup from closing is to call
event.preventDefault()
.
Change your code from this:
$ionicPopup.show({
buttons: [{
onTap: function(event) {
if (!shouldClosePopup) {
return false;
}
}
}]
});
To this:
$ionicPopup.show({
buttons: [{
onTap: function(event) {
if (!shouldClosePopup) {
event.preventDefault();
}
}
}]
});
(cb1a5f62)
- The developer should be stating exactly how an icon
should show, but previously the right nav arrow icon violates this by
automatically showing a right arrow when an item was an anchor or
button. Instead of using the
:after
item selector, which was always applied by default, it uses the same markup asitem-icon-right
, which is easier to understand, customizable and not a hard coded default.
This change removes the :after
nav icon styling, and creates a new
class, icon-accessory
, based off of similar CSS. The change makes a
nav arrow highly customizable, allows RTL developers to easily control
the arrow direction, and the accessory class is something that's
reusable.
An example of right side arrow using ion-chevron-right
as the icon:
<a class="item item-icon-right" href="#">
Check mail
<i class="icon ion-chevron-right icon-accessory"></i>
</a>
(c7e3defc)
- ionic.Platform.isCordova() has been renamed to ionic.Platform.isWebView() (5c300dd3)
- ion-list syntax has changed in favor of simplicity & flexibility.
Relevant documentation: ionList, ionItem, ionOptionButton, ionReorderButton, ionDeleteButton, $ionicListDelegate.
To migrate, change your code from this:
<ion-list option-buttons="[{text:'hello',type:'button-positive',onTap:tap()}]"
on-delete="onDelete(el)"
delete-icon="ion-minus-circled"
can-delete="true"
show-delete="shouldShowDelete"
on-reorder="onReorder(el, startIndex, toIndex)"
reorder-icon="ion-navicon"
can-reorder="true"
show-reorder="shouldShowReorder">
<ion-item ng-repeat="item in items">
{{item}}
</ion-item>
</ion-list>
To this:
<ion-list show-delete="shouldShowDelete"
show-reorder="shouldShowReorder">
<ion-item ng-repeat="item in items">
{{item}}
<ion-delete-button class="ion-minus-circled"
ng-click="onDelete(item)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
ng-click="onReorder(item, $fromIndex, $toIndex)">
</ion-reorder-button>
<ion-option-button class="button-positive" ng-click="tap()">
Hello
</ion-option-button>
</ion-item>
</ion-list>
(986dbac8)
- Before, if you did not have a
title
attribute set on your ion-view, it would transition into that view and erase the navbar's current title.
Now, if your ion-view does not have a title
attribute set, the new
view will be transitioned in, but there will be no title change.
If you wish to have a blank title on your new view, you must now
explicitly set your ion-view
's title attribute to an empty string.
To migrate your code, change from this:
<ion-view></ion-view>
To this:
<ion-view title=""></ion-view>
(d53eab81)
- active: Updated which elements to set active class along w/ tests, closes #857 (423f9e4f)
- badge: Badge horizontal alignment over item right side buttons, closes #826 (ded46931)
- click:
- domready: Fixed if firing off callbacks when DOM was already ready (a637fb4d)
- grid: Correct responsive grid breaks for col-XX, closes #803 (8fae85e9)
- input: Fix input label from shifting when text is too long on iOS, closes #801 (b8d4c51f)
- ionList: only stop side menu drag if canSwipe (c653e83c, closes #709)
- ionTab: stop browser-tooltip from appearing due to
title
attr (aa30faf8, closes #804) - item:
- listView:
- pointer: Add pointer styling to .item[ng-click], closes #858 (aa280910)
- popup:
- range: Clicking Line For Range Causes Drag Button To Follow Mouse, close #779 (26c8f304)
- reorder: Prevent scroll w/ data-prevent-scroll attr on reorder btn, closes #848 (f1ed4b00)
- scrollView:
- tabs: Renamed .tab-item active state from .active to .tab-item-active, closes #866 (24160aa0)
- tap:
- toggle: Changed tap listener to use "release", closes #882 #881 (b1a7c199)
- $ionicLoading: implement backdrop class (57d71ed6, closes #837)
- $ionicScrollDelegate: rememberScrollPosition, scrollToRememberedPosition (5a0efece)
- content: automatically add/remove has-* classes to content (e94d4006, closes #619)
- grid: Remove column offset with responsive grid breaks (73ba2a40)
- ion-content: watch padding attribute (532d473e)
- ionTabs: add available tabs-item-hide class (5966dbf4, closes #395)
- ionicNavBar: add getTitle() and getPreviousTitle() methods (215b1c1e)
- loadingView:
- navclear: Ability to disable the next view transition and back button (f744d9eb)
- popup: Support for programatically closing popup. (dc2b24ed, closes #854)
- progress: Set progress element's default width to 100%, closes #872 (b9cde47d)
- ready: Add 'platform-ready' css class to the body when the platform is ready (681a6a2e)
- sideMenu: Added directive for simple toggling (5a89df43)
- ionTabs:
tabs-type
andtabs-style
removed. Use classNames instead.
Relevant Documentation: ionTabs.
Old Code:
<ion-tabs tabs-type="tabs-top" tabs-style="tabs-positive" animation="slide-left-right">
New Code:
<ion-tabs class="tabs-top tabs-positive slide-left-right">
- ionHeaderBar, ionFooterBar: remove
type
,title
,left-buttons
,right-buttons
.
Relevant Documentation: ionHeaderBar, ionFooterBar.
Old Code:
<ion-header-bar type="bar-positive"
title="{{someTitle}}"
left-buttons="left"
right-buttons="right">
</ion-header-bar>
New Code:
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button" ng-click="leftButtonTap()">
Left Button
</button>
</div>
<h1 class="title">{{someTitle}}</h>
<div class="buttons">
<button class="button" ng-click="rightButtonTap()">
Right Button
</button>
</div>
</ion-header-bar>
- ionNavBar, ionView: Remove
left-buttons
,right-buttons
,type
,animation
,back-button-*
attributes from ionNavBar. Removeleft-buttons
,right-buttons
from ionView.
Additionally, all 'viewState.*' events have been removed. Use $ionicNavBarDelegate.
Relevant Documentation: ionNavBar, ionView, ionNavBackButton (new), ionNavButtons (new).
Old Code:
<ion-nav-bar type="bar-positive"
animation="slide-left-right"
back-button-type="button-icon"
back-button-icon="ion-arrow-left-c"
back-button-label="Back">
</ion-nav-bar>
<ion-nav-view>
<ion-view left-buttons="leftButtons"
title="someTitle"
right-buttons="rightButtons">
</ion-view>
</ion-nav-view>
New Code:
<ion-nav-bar class="bar-positive slide-left-right">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<ion-view title="someTitle">
<ion-nav-buttons side="left">
<button class="button" ng-click="leftButtonTap()">
Left Button
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button" ng-click="rightButtonTap()">
Right Button
</button>
</ion-nav-buttons>
</ion-view>
</ion-nav-view>
- ionSideMenuContent: is now an element directive.
Relevant documentation: ionSideMenus, ionSideMenuContent, ionSideMenu.
Old Code:
<ion-side-menus>
<ion-pane ion-side-menu-content>
</ion-pane>
</ion-side-menus>
New Code:
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
</ion-side-menus>
- actionsheet:
- backbutton: Allow only one back button listener to run per click, closes #693 (a491f22c)
- badge:
- button:
- checkbox: Fix checkmark in Android 2.3 (717148d9)
- colors: Update all #4A87EE colors to use $positive color, closes #731 (d113ddfa)
- footer: Show footers within tab content, closes #728 (9c5772f3)
- history: Separate histories and views, clear other views in clearHistory(), closes #724 (c99427aa)
- input: Correct vertical alignment of inputs and their labels, closes #799 (6547ca60)
- ionTabs: do not pre-transclude; stops error on compile (ecfdbaa6, closes #730)
- item:
- list: Drag to expose list option buttons, closes #701 (25650005)
- modal:
- navView: _getView renamed to _getViewById, closes #736 (78206d0e)
- platform: Fix Platform.showStatusBar so it can be used multiple times, closes #702 (a6c47cd3)
- sideMenu:
- sideMenuController: sticking issue #738 (ea04e393)
- sidemenu: Side menu always needs to have translate3d applied, closes #710 (16ac2ff1)
- tap:
- toggle: Fix toggle handle on Android 2.3 (72f2e840)
- active: Removing use of :active in favor of .active for more control of active state (baa04cde)
- animation: Add right to left animations, and their reverse, for RTL support, closes #643 (4628b9fb)
- ionInfiniteScroll:
- allow configuration of icon and text through
icon
andtext
attributes (5f2c32ea)
- allow configuration of icon and text through
- ionRefresher: allow custom text & icons through
pulling-text
,pulling-icon
,refreshing-text
,refreshing-icon
attributes. (573df56d, closes #760) - modal:
- popup: Added popup support (a30b0b7d)
- toggle: Added dragging support to toggle switches (cc15a5b4)
- on-refresh and on-refresh-opening are no longer on the ion-content directive. They are on the ion-refresher. In addition, on-refresh-opening has been renamed to on-pulling.
Change your code from this:
<ion-content on-refresh="onRefresh()"
on-refresh-opening="onRefreshOpening()">
<ion-refresher></ion-refresher>
</ion-content>
To this:
<ion-content>
<ion-refresher on-refresh="onRefresh()"
on-pulling="onRefreshOpening()">
</ion-refresher>
</ion-content>
(573df56d)
- on-infinite-scroll and infinite-scroll-distance are no longer attributes on the ion-content directive. They are on the ion-infinite-scroll element.
Chang your code from this:
<ion-content on-infinite-scroll="onInfiniteScroll()"
infinite-scroll-distance="1%">
</ion-content>
To this:
<ion-content>
<ion-infinite-scroll on-infinite="onInfiniteScroll()"
distance="1%"
</ion-infinite-scroll>
</ion-content>
ionHeaderBar's title attribute is now interpolated.
Change this code: <ion-header-bar title="myTitleVar"></ion-header-bar>
To this code: <ion-header-bar title="{{myTitleVar}}"></ion-header-bar>
(a8e1524c)
*
ionicSlideBox#getPos has been renamed to ionicSlideBox#currentIndex.
ionicSlideBox#numSlides has been renamed to ionicSlideBox#slidesCount. (1dd55276)
- actionsheet: Actionsheet in modal has pointer-events enabled, closes #660 (1503cc72)
- click: event.preventDefault() when setting focus() on an input, closes 583 (fc8ab4b8)
- ionContent:
- ionPrefix: disableRegisterByTagName updated w/
ion-
prefix for correct view history (2494b5f9) - ionSideMenu: use manual transclude instead of ngTransclude (991d3cfd, closes #666)
- ionTabs: cleanup and fix many issues (0f1b6f47, closes #597)
- ionicScrollDelegate:
- item: degrade .item right arrows by grade for low end devices (3a69bb34)
- loading: make showDelay option work correctly (7281e2ab, closes #562)
- modal:
- Fix modal animation for firefox, closes #671 (0033c880)
- navBar:
- platform: Update ionic.Platform.is() to check all platforms, closes #604 (fcd0fa73)
- sideMenu: remove translate3d when not needed, close #636 (07092f00)
- slideBox: make
does-continue
attribute work continuously (f6ec6a3c, closes #575) - tabs:
- Double tapping a tab would set the wrong view history, closes #656 (f0faae16)
- text-rendering: Disable text-rendering:optimizeLegibility for low end devices (10289466)
- thumbnail: Correctly apply thumbnail style to item directive, closes #509 (977c1cc6)
- transform: Polyfill
style.transform
to work w/ non-webkit (52671c18)
- grade: Set grade in body class depending on platform performance (b69b40c8)
- ionContent: use child scope instead of isolate scope (49e0dac9, closes #555)
- ionInfiniteScroll: use event system (7b0716c2, closes #661)
- ionNavAnimation:
<a href="#/page" ion-nav-animation="slide-in-up">
(8354d42b) - item: Auto right-arrow for complex list items w/ ng-click/href, closes #472 (327a6866) (110ff9f4, closes #243)
- sass: All variables now have !default assigned, closes #631 (53af2c7a)
- scrollbar: Do not use rgba background for scrollbar on grade-b and c devices (805c35c1)
- sideMenu:
- Degrade .menu-content box-shadow w/ platform grade for animation performance (d2a0780b)
- The binding for ionInfiniteScroll has changed, as well as how you finish it.
If you had this code before:
<ion-content on-infinite-scroll="doSomething"></ion-content>
function MyCtrl($scope) {
$scope.doSomething = function(scrollDoneCallback) {
doSomething();
scrollDoneCallback();
};
}
Now, your code should look like this:
<ion-content on-infinite-scroll="doSomething()"></ion-content>
function MyCtrl($scope) {
$scope.doSomething = function() {
doSomething();
$scope.$broadcast('scroll.infiniteScrollComplete');
};
}
- anchorScroll: find offset of nested elements correctly (17cc0408, closes #618)
- click: event.preventDefault() when setting focus() on an input, closes 583 (fc8ab4b8)
- ionicLoading: make showDelay default to 0 (was 2000) (0d3718cc)
- ionicScrollDelegate: tapScrollToTop won't fire for button tap (70d95249, closes #557)
- loading: make showDelay option work correctly (7281e2ab, closes #562)
- modal: do not click buttons underneath modal (9bc928f0)
- navBar: animations work properly (749cd382)
- scrollView:
- tabs: broadcast tab.shown/tab.hidden to only child scopes (69fda4e5)
- angular: Update to Angular v1.2.12, closes #600 (97f4f6ea)
- button: Increase hit area size of a button (c168b489)
- event: Created stopEvent directive to use for certain ng-click cases, closes #550 (8b308a17)
- ionic: prefix all directives with
ion-
(2c39a214) - modal:
- navBar: allow expression in
type
.<nav-bar type="{{myType}}">
(5470d77a, closes #599) - sideMenu: allow and watch attrs
width
&is-enabled
(bfefc69f)
- All directives are now prefixed with
ion-
.
For any directive you use, add the ionic prefix.
For example, change this HTML:
<tabs>
<tab title="home" href="/tab/home">
<content>Hello!</content>
</tab>
</tabs>
To this HTML:
<ion-tabs>
<ion-tab title="home" href="/tab/home">
<ion-content>Hello!</ion-content>
</ion-tab>
</ion-tabs>
(2c39a214)
- android: when keyboard comes up, ensure input is in view (9327ac71, closes #314)
- backButton:
- browser: on first hash-set, dont set scrollTop (1c4d4a8b)
- buttonIcon:
- click: Clicks firing twice, closes #573 (2132d292)
- header: Header icon button css fix for Safari, closes #576 (801d2d7b)
- ionicScrollDelegate: trigger resize before scrolling to top/bottom (ea289b81, closes #522)
- list: css: don't make last .list on page have margin-bottom (fb5a0d4c)
- listButtons: Update list button sizes, closes #478 (91652112)
- navBar: Remove duplicate back button arrows, closes #547 (4808e80d)
- refresher: make refresher css not create gap at end of list (79387a4e)
- scroll:
<scroll>
is now registered with $ionicScrollDelegate (2c7ce763) - scroll-view: css: make it take up only 100% height (d2f9e94b)
- scrollView:
- sideMenuContent: make dragContent default to true (61a280bd)
- $ionicScrollDelegate:
- domUtil: add getPositionInParent function (a970f0bd)
- grid: Added classes, variables and mixins for responsive grid options (1cdb999e)
- ionic: remove angular-sanitize (ngSanitize) as dependency (e7556233)
- list: reordering scrolls page, reordering performance better (7f4b28d9, closes #521)
- sideMenuContent: watch
drag-content
attribute (7f9bfb5a) - tabs:
- toggle:
- Android back button correctly goes back a view or closes the app
- CustomEvent polyfill improvements for Android
- Fix tab icon alignments
- Fix $ionicPlatform.ready()
- Fire off ionic.Platform.ready() callbacks for both Cordova and non-cordova
- Created ionic.Platform.exitApp();
- Add major and minor platform version numbers in body css
- Removed dist folder from git
- Created release folder to hold the latest release
- Automate bulding the nightly folder in the CDN
- Clicking tab item takes user to root/home of the tab
- Add tab badges with
badge
attribute - Remember the previous scroll of a page when going back to it
Breaking Changes
bower install ionic
: release files are now located in therelease
folder, notdist
.
- Tap polyfill overhaul to remove 300ms delay when firing a click
- Android click firing twice fixes
- Fixes with the tap polyfill for directives using ng-click
- Upgrade to Angular v1.2.10
- Reduce default button height
- Toggle directive now includes .item.item-toggle wrapper
- Toggle/Checkbox/Radio implements ng-model/ng-value/ng-change
- Ionicons v1.4.2, icons now using :before pseudo
- Button and header size updates
- Android "click" event firing twice fixes
- Refactor platform ready event listeners
- Refactor navView directive
- Created ionic.Platform.fullscreen() and .showStatusBar()
- Update to Angular v1.2.8
- Disable pointer-events during transitions
- Remove ngTouch from angular.modules
- Remove angular-touch.js and angular-route.js references
- Improved transitions between views
- Fixed hide-nav-bar/hide-back-button view attributes
- Removed title attributes from DOM
- Remove nav title if the entering view doesn't have one
- Fix padding being added to content directive
- Rename ionic services to use $ionic prefix
- Created ViewState Service to track navigation history
- Created navView directive
- Removed navPage and navRouter directives
- Using AngularUI Router instead of $route
- Update examples to use $stateProvider instead $routeProvider
- Slide box bug fixes
- Fixed issues with minification
- Small tweaks
- Nav bar button fixes
- New slide box overhaul
- New list overhaul
- Radio button and checkbox fixes
- Scrollbars
- Scroll bug fixes
- Scroll view fixes
- Radio button and checkbox fixes
- Slide box fixes
- Massive scroll performance improvements
- Android fixes and perf improvements
- Header and nav bar button fixes
- Animation performance improvements
- nav router back button fixes
- Remove back button on first route
- Fix forward/back transition on iOS devices which lack history.state
- Fixed some overflow scrolling issues.