- Cached Views:
- Previously, as a user navigated an app, each exiting view’s element and scope would be destroyed. If the same view was accessed again then the app would have to recreate the element. Views can now be cached to improve performance.
- Now, when a view is exited, its elements are left in the DOM, and its scope is disconnected from the cycle. When navigating to a view which is already cached, its scope is reconnected, and the existing element which was left in the DOM becomes the active view.
- This also allows for scroll position of previous views to be maintained (without skippy jumps).
- Config variables can be used to disable view caching, IE set to 0, or change the maximum number of views to cache.
- Individual ionViews can disable caching by using the
cache-view="false"attribute, or from its$stateProvider.stateconfig. - Note: Views with many large images or videos should not be cached.
- The ionNavView docs have more further documentation.
- Navigation: Refactored for improved performance
- Reduced DOM manipulations
- Cached Views (see above)
- Increased transition FPS for smoother animation
- Angular v1.3:
- Upgraded Ionic to work with Angular v1.3.
- In general Ionic just works with the upgrade, but the required change was that animations in v1.3 uses promises, whereas in v1.2 animations used callbacks.
- Check out the Angular 1.3 ng-europe presentation and Migrating from 1.2 to 1.3 for more information.
- Platform Specific Transitions: Transitions between views now default to the transition style appropriate for each platform.
- For example, iOS will move forward by transitioning the entering view from right to center, and the exiting view from center to left. However, Android will transition with the exiting view going from bottom to center, covering the previous view, which remains stationary.
- Platform transitions are automatically applied by default, but config variables and custom CSS allows these defaults to be easily overridden.
- ionNavTitle: Use the nav title directive to set custom HTML the for the header bar's title from within an ionView template. This gives each view the ability to specify its own custom title, such as an image or any HTML, rather than being text-only.
- enable-menu-with-back-views: In many mobile apps, sidemenus are disabled on child views. The
enable-menu-with-back-viewsattribute determines if the side menu is enabled when the back button is showing.- When set to
false, any buttons/links with themenuToggledirective will be hidden, and the user cannot swipe to open the menu. - When going back to the root page of the side menu (the page without a back button visible), menuToggle buttons will show again, and menus will be re-enabled.
- ionSideMenus docs
- When set to
- menuClose: Closes a side menu which is currently opened. Additionally, the menuClose directive will now cause transitions to not animate between views while the menu is being closed.
- ionNavBackButton: The back button icon and text will automatically update to platform config defaults, such as adjusting to the platform back icon.
- To take advantage of this, the
ionNavBackButtondirective should now be empty, IE<ion-nav-back-button></ion-nav-back-button>. - The back button can still be fully customized like it could before, but without any inner content it knows to style using platform configs.
- ionNavBackButton docs
- To take advantage of this, the
- navBar button primary/secondary sides: Primary and secondary sides are now the recommended values for the
sideattribute, such as<ion-nav-buttons side="primary">.- Primary buttons generally map to the left side of the header, and secondary buttons are generally on the right side.
- However, their exact locations are platform specific.
- For example, in iOS the primary buttons are on the far left of the header, and secondary buttons are on the far right, with the header title centered between them.
- For Android however, both groups of buttons are on the far right of the header, with the header title aligned left.
- Recommendation is to always use
primaryandsecondaryso buttons correctly map to the side familiar to users of a platform. - In cases where buttons should always be on an exact side, both
leftandrightsides are still available. - ionNavButtons docs
- $ionicView Events: Now that views can be cached, controllers may only load once, which may change how you'd expect data to load.
- New events have been added that get emitted from the view's scope:
$ionicView.enter,$ionicView.leave,$ionicView.loaded. - These events also contain data about the view, such as the title and if the back button should show, along with transition data, such as the transition type and direction that was used.
- ionView docs
- New events have been added that get emitted from the view's scope:
- Override Transition Type and Direction: As a user navigates the app, Ionic automatically applies the appropriate transition type for the platform, and the direction the user is navigating. Both can be overridden in numerous ways: config variable, view attribute, stateProvider property, or attribute on the button/link that initiated the transition.
- navDirection: An attribute directive that sets the direction which the nav view transition should animate.
- navTransition: An attribute directive that sets the transition type which the nav view transition should use when it animates. Using
nonewill disable an animation. - $ionicConfigProvider: Configs can be changed using the
$ionicConfigProviderduring the configuration phase of your app.$ionicConfigcan also set and get config values during the run phase and within the app itself.
- Animation CSS: The CSS for view transitions have changed. This is a breaking change only if Ionic apps had customized Ionic’s animation CSS. Additionally, all keyframe animations were removed since they weren't being used. (20Kb saved!)
- $ionicPlatformDefaults: Platform config variables are no longer in the $ionicPlatformDefaults constant, but within
$ionicConfigProvider. - navClear: The navClear directive was created to do what the new side menu
enable-menu-with-back-viewsattribute accomplishes and has therefore been removed. Additionally, the newnavTransitionandnavDirectiondirectives are more useful and granular. - scrollView.rememberScrollPosition: This method has been removed since it is no longer needed with cached views.
- ionView.title: The
ionViewdirective used thetitleattribute, but this can cause the tooltip to show up on desktop browsers. Thetitleattribute will still work for backwards compatibility, but we now recommend usingview-title, such as<ion-view view-title=”My Title”>. - ionNavView animation attribute: The animation attribute can be safely removed as it is no longer used for nav views. Instead use
$ionicConfig. - ionNavBar animation attribute: The animation attribute can be safely removed as it is no longer used for nav bars. Instead use
$ionicConfig. - $ionicNavBarDelegate#changeTitle: To set a title you now use
title(value)(with an argument). ThechangeTitle()method will now produce a console.warning message, but it can still be used for this version. - $ionicNavBarDelegate#setTitle: To set a title you now use
title(value)(with an argument). ThesetTitle()method will now produce a console.warning message, but it can still be used for this version. - $ionicNavBarDelegate#getTitle: To get a title you now use the return value of
title()(no argument). ThegetTitle()method will now produce a console.warning message, but it can still be used for this version. - $ionicNavBarDelegate#back: The
back()method has been removed in favor of using$ionicHistory.goBack(). Additionally,$ionicGoBack()is added to the rootScope. $ionicHistory docs - $ionicNavBarDelegate#getPreviousTitle: The
getPreviousTitle()method has been removed in favor of$ionicHistory.backTitle(). $ionicHistory docs - $ionicViewService: In the navigation refactoring, $ionicViewService was split up into two factories,
$ionicViewSwitcherand$ionicHistory. The$ionicHistoryis largely what$ionicViewServicewas, but now between the two there is a better separation of concerns for improved testing. $ionicHistory docs
- card: less intense box shadow (95d3f2e3)
- click: remove native click prevent 400ms later (20d567f8, closes #2204)
- exposeAsideWhen: disable with isEnabled=false (6f79a5e5, closes #2210)
- history: tabs lose history after switching tabs (68de8ed9, closes #1978)
- keyboard: android scroll stuck (74de015c)
- loading: prevent spinners in loading view from causing reflows when hidden. (767ce6a3, closes #2013)
- menuClose: do not close if aside exposed (b239eb9e)
- nav: prevent flickers between views (03086ed2)
- popup:
- scroll: ensure scrollView objects exist (8883c6cc)
- scrollView: check that element has not yet been GC'd before removing event listeners in $des (5e8250b1)
- sideMenu:
- splitView: disable menu toggles on exposed aside (ed3e9e30, closes #2182)
- tabs: fix android untyled android tab (aa7e9dd7)
- templateCache: make sure $state is passed config options before checking what they are (cb9b81d5)
- titles: error during quick transition changes (fe9f43d1)
- angular:
- cordovaEvents: $ionicPlatform.on method (046ad53b, closes #2219)
- refresher: Improve refresher animation. Allow pulling icon rotation to be disabled. (db27fb11)
- back button: do not animate back button transition if the title doesn't change. (d3c8a1b2, closes #1858)
- buttons: centering icons on tag buttons. (69442d5a, closes #2074)
- classList: error on svg elements (98629d42, closes #1795)
- collectionRepeat:
- always render data correctly with before/after isblings (120f99ee, closes #2025)
- simplify item reusing process to fix rare reuse error (8c6d5f2c, closes #1777)
- with ngHref, make href attr erase if falsy (977f6818, closes #1674)
- rerender when $ionicScrollDelegate resizes (5e025fbb, closes #1777)
- ignore spacing of hidden elements (ion-refresher) (9bfa3bd1, closes #1970)
- ionContent: fix rare positioning bug when overflow-scroll is enabled (84b5e919, closes #1281)
- item: clicks climb 5 levels looking for an item to activate, but not 6. (840c014b, closes #1921)
- keyboard: screen.height fallback for window.innerHeight (77847f49, closes #2168)
- loading: potential race condition with showing and hiding loading in same watch cycle (65aece2a)
- menuContent: gestures do not stop_browser_behavior (df578585, closes #421)
- platform: fullscreen method will not offset footer by 20px (b1f94da2)
- popup:
- refresher: finish animating before changing icon, hide when not in use (c336e8ed)
- reorder:
- scroll:
- scrollView: resolve memory leaks with holding element references (c5966bba)
- sideMenu:
- $ionicBody: service to simplify body ele interaction (2c3f1c9f)
- $ionicConfigProvider: add $ionicConfigProvider (2643cffc)
- $ionicScrollDelegate: expose zoomBy and zoomTo methods (029f8f33, closes #1977)
- ionContent: add
lockingoption (af229072, closes #2034) - ionScroll: add locking option (cc8f31d8, closes #2034)
- popover: support popping from bottom or top of screen (5d06c4ae, closes #1986)
- scroll-content: add 1px padding-top (e5b5906c)
- splitView: expose side menu on large viewport (b69aa548)
- templateCache: automatically cache template files to prevent flicker on page navigation and imp (944a92b0)
- actionSheet: run $apply when closing actionSheet with back button (d3ed66e0)
- backdrop: disable tap longer after backdrop close (7faeeda0, closes #1536)
- cards: No more double margin if inside padding container (03903239)
- demos: fix HTML validation issue (c47fcccc)
- forms: Normalized form styles (89999cad)
- header: buttons do not align in Android 4.4 (06086ee9, closes #1614)
- ionRadio: fix ng-change being reported before model changes (53c437e2, closes #1741)
- nav: Removed border on animation (a9a52f64)
- popup: backdrop release fires with every close (ae87c66b)
- sideMenu: remove .menu-open on destroy (f246c5aa)
- tabs:
- toggle: fix toggle-class attribute (6fbd1a43, closes #1851)
- viewService: No error on clearHistory for empty history (64641b1b)
- collectionRepeat: other children of ion-content element fit in (7ddb57e6, closes #1920, #1866, #1380)
- popover: created popovers (c1215aa3)
- tabs: Expand striped android style tab functionality. Closes 1694 (ddda809b)
ion-radio no longer has an isolate scope.
This will break your radio only if you were relying upon the radio having an isolate scope: if you were referencing $parent.value as
the ng-disabled attribute, for example.
Change your code from this:
<ion-radio ng-disabled="{{$parent.isDisabled}}"></ion-radio>
To this:
<ion-radio ng-disabled="{{isDisabled}}"></ion-radio>
(53c437e2)
- button: fix button overflow causing whole screen to overflow left/right (114dad8c, closes #1780)
- collectionRepeat:
- gesture: fix onSwipeDown (2dce7a74, closes #1810)
- ionList: allow scrolling while reorder or delete is active (2e9d0965, closes #1703)
- ionReorderButton: stop
ngRepeat:dupeserror when reordering (ba1859b3, closes #1601) - list:
- loading:
- nav: remove disabled-pointer-events (5b50e120, closes #1383)
- navBar: only add default animation if there is no custom animation (cdba48f1, closes #1671)
- scroll:
- scrollView:
- select: prevent ion-item text from overlapping select input. (a56e647b, closes #1735)
- sideMenu:
- sidemen: scroll false causes sidemenu content to disappear. (6b218042, closes #1485)
- slidebox: default to not autoplay (81a7342f)
- sliderView: "getBoundClientRect" typo (0dad2ed6)
- tap:
- toggle: fix ngChange being reported before model changes (537b29d0, closes #1349, #1741)
- view: don't affect history when inside a modal (b7f45e7c, closes #1667)
- $ionicLoading: add $ionicLoadingConfig constant for default options (26ca840d, closes #1800)
- checkbox: add disabled and emotion styles to ion-checkbox. and #1509 (79fb1e49, closes #1683)
- ionModalView: ion-modal-view to wrap template instead of
<div class="modal">(ed4f2288, closes #1668) - ionSideMenu: add
edge-drag-threshold, delegateedgeDragThreshold()(ba56bb98, closes #1570) - ionSlideBox: add 'auto-play' attr to optionally disable auto-play (8f808609, closes #1552)
- tab: options 'hidden' attribute for tabs., #1673 (bb6976ad, closes #1666)
ion-toggle no longer has an isolate scope.
This will break your toggle only if you were relying upon the toggle
having an isolate scope: if you were referencing $parent.value as
the ng-disabled attribute, for example.
Change your code from this:
To this:
(537b29d0)
- Reordering with ion-reorder-button no longer changes the order of the items in the DOM.
This change will only break your list if you were not using the onReorder callback as described in the documentation.
Before, while reordering an element in a list Ionic would swap the elements underneath as the reordering happened. This sometimes caused errors with angular's ngRepeat directive.
Now, reordering an element in a list does not change the order of
elements in the DOM. It is expected that the end developer will use the
index changes given in the onReorder callback to reorder the items
in the list. This is simple to do, see the examples in the
ionReorderButton
documentation.
(ba1859b3)
- collectionRepeat: fix scroll when item bigger than viewport (b2585f19, closes #1621)
- footerBar: fixed top border position on retina displays. (f4043e67, closes #1661)
- gestureDirectives: fix problem with event being passed in (b4b94073)
- header: add iOS 8 support to iOS header fix. assumes all iOS will have 7 style headers. (4a2296dc, closes #1625)
- headerBar: scroll to top (6eefee3d)
- listItem: apply color styles to complex list items (9ff1b965)
- menu: safari z-index fix for
.menu .scroll-content(754ef461, closes #1408) - modal: remove iOS style header padding from inset headers in modal popups on iPad in po (e6dda6a5, closes #1605)
- popup: if popup is taller than the window, shrink the popup body and make it scrollable (3e6ce183, closes #1679)
- radio: suport ng-disabled. (704fe402, closes #1684)
- scroll: safari scroll content height (96b2243f)
- scrollController: allow tab $historyId to remember scroll (9b601b55, closes #1654)
- scrollView: clonedInputs get placeholder text if any (f2f55199)
- sliderView: find width properly when element is transformed (86ce4806, closes #1313)
- tap: get containing label of deeply nested element (2e3b8546, closes #1643)
- cancelAnimationFrame: polyfill in ionic.DomUtil (a0577346)
- content: scroll=false in sidemenu hides content (53c17104, closes #1485)
- css: reset FirefoxOS default gradients (5f1ea5f6, closes #1426)
- headerBarView: check for null in getTextBounds (be351ce1, closes #1377)
- tap: error when releasing outside of browser (8da9f34b, closes #1612)
- ionicons:
- upgrade to v1.5.2 (17ee672f)
- $ionNavView: prevent read property 'name' of null (4831f489, closes #1587)
- $ionicActionSheet:
- .slide-in-right: fix leave animation being same as enter (024f51d3, closes #1610)
- backdrop: Changed z-index for loading backdrop only. (4c700e9c, closes #1428)
- collectionRepeat:
- firefox: Add FF 19+ style vendor prefixing (bit.ly/1tLz8Qp) (5286a0c4, closes #1574)
- headerBar: More accurate scroll-to-top detection (1a7c1f1d)
- ionItem:
- ionNavBackButton: stop flicker when pressing back on ios (cec3a422)
- ionRadio:
- ionRefresher: be sure to run on-refresh with an angular digest (979f7b52, closes #1465)
- ionScroll: let zoom work on android devices (e88659c6, closes #1440)
- listView:
- loading: backdrop higher z-index (bfce8e27)
- modal: error message for modal show after remove (003659b6)
- nav: make fewer z-index assumptions while animating in ios7 animation (02f5fcb7)
- popup: focus on first input (71efd51b, closes #822)
- radioButtons: Correcting a bug introduced by 521164db786a0b836b5b8149816f50da55c6a82a. (ead5e026, closes #1599)
- scroll: input text selecting w/ mouse events (86e1fe9a, closes #1475)
- tap:
- test: Use HTML5 doctype on all tests., #1524 (18391589, closes #1539)
- $ionicActionSheet: add cancelOnStateChange option, default true (087e55f3, closes #1318)
- $ionicModal: add
hardwareBackButtonCloseas option, default true (9ffca1e4, closes #1397) - $ionicSlideBoxDelegate: add
start()to resume after stop (e4ab045e, closes #1584) - angular: update to AngularJS v1.2.17 (89d5553d)
- collectionRepeat: huge optimization upgrades (6af5d68d, closes #1597)
- gestures: added gesture directives (a2dcaf13, closes #829)
- ionScroll: add has-bouncing=true/false attribute (00c80e85, closes #1573, #1367)
- ionTab: add class attribute to tab items (e6f79cc0)
- ionic.Platform: add ionic.Platform.setGrade() function (05dd7b18, closes #1104)
- itemFloatingLabel: add floating labels: 'item-floating-label' class (050b4f25, closes #1611)
- platforms: Android and iOS Specific Styles and Transitions (c30be67f)
- scrollView: better deceleration for scroll view on iOS (9c77089a)
- $ionicActionSheet's default behavior is now to cancel
when the app's state changes. To disable this behavior, pass
cancelOnStateChange: falseinto $ionicActionSheet.show().
(087e55f3)
- $ionicActionSheet now returns a method to hide the action sheet.
Previously, it returned an object that had a show and hide method.
This was undocumented, but if you used it, here is how to migrate your
code:
Change your code from this:
var sheet = $ionicActionSheet.show({...});
sheet.hide();To this:
var hideSheet = $ionicActionSheet.show({...});
hideSheet();(b7646a56)
- click: fix mouseup click for ion-option-button (29ee6407)
- collectionRepeat: fix rare NPE error on android 4.1 (94f0b5b7, closes #1292)
- input: fix long input text adjusting left on focus (e6b5ff22, closes #1390)
- ionContent: make content scrollable if it is a child of a non-scrollable content (488bd5c0, closes #1421)
- ionFooterBar: properly offset content for bar-subfooter (46e33664)
- ionReorderButton: fix onReorder not triggering an angular digest (cc46735c)
- ionSlideBox: fix regression allowing slide past boundaries (ec5a2763, closes #1414, #1405, #1409, #1321)
- requirejs: fix bug with requirejs & loading order of angular taps (36181091)
- scrollView:
- make xy scrolling work on ionScroll and ionContent (49f06f9c, closes #1462)
- fix clonedInputs not being removed for large textareas on keyboardshow (88e41e1a, closes #1420)
- on desktop, make mousewheel only scroll the scrollView under the mouse (3250d10d, closes #1376)
- stop memory-leak when destroying scrollView (4a210130, closes #1096)
- tap: select tag not working in IE (7059b818, closes #1435)
- footer: keyboard-attach attribute directive to position footer above keyboard (09d1197a)
- sideMenu:
- $ionicLoading: do not flicker when showing long loading messages (90e7395e, closes #1252)
- .slide-left-right-ios7: do not give borders to header/footer bars (30a9da19, closes #1232)
- .tab-item: make it work with activator (1b1c234f, closes #1317)
- CustomEvent: fix IE CustomEvent polyfill (191464c9)
- activator: properly activate elements nested inside an item (3c15b118)
- button: fix icon vertical alignments for IE 10 (930794cd)
- e2e-tests: disable ionic-tap during e2e tests (636ca943, closes #1310)
- footer: Fix placement of .bar-footer.item-input-inset (eaee564d, closes #1325)
- header: Set a height for
.bar .title(0c960b54) - headerBar: tap to scroll to top only on the nearest scrollview (58c97e0d, closes #1329)
- input:
- ion-header-bar: when hidden, correctly offset the ion-content (efa61844, closes #1351)
- ionCheckbox: make ng-checked and ng-change work (a006d896, closes #1349)
- ionItem: transform to
<a>tag for ui-sref (c6c1300b) - ionNavButtons: do not append if page is removed very quickly (24a488bb)
- ionToggle: stop error in edge case of drag ending before raf (d108a29e)
- ionView:
- listView: reordering upwards in a list is more responsive, fix scrolling error (df9c0747, closes #1202)
- refresher: make arrow spin correctly (2ec01733, closes #1319)
- scroll:
- select:
- sideMenu: Disable content interaction when menu open (76d4c083, closes #1339)
- tap:
- textarea: Allow scroll in textarea when focused (5f2fdfdd, closes #1280)
- $ionicModal: allow configuration of backdropClickToClose (291d723a)
- ionNavBackButton: make pressed state work (8d34ab28)
- platform: added isWindowsPhone() method (08e4b3d9)
- tap: Make TAP_RELEASE_TOLERANCE configurable (27369930)
- touch-action: add touch-action: manipulation (40cd6f72)
- ui-router: upgrade to angular-ui-router v0.2.10 (b9353e71, closes #941)
- ion-checkbox no longer has an isolate scope.
This will break your checkbox only if you were relying upon the
checkbox having an isolate scope: if you were referencing
$parent.value as the ng-disabled attribute, for example.
Change your code from this:
<ion-checkbox ng-disabled="{{$parent.isDisabled}}"></ion-checkbox>To this:
<ion-checkbox ng-disabled="{{isDisabled}}"></ion-checkbox>(a006d896)
- .pane: Remove overflow:hidden from .pane,.view (64f0030b)
- .tabs-icon-*: only work on directly descendant tabs (77f26831, closes #1261)
- bar: properly align titles if switching to view with no buttons (ade143ed, closes #1242)
- collectionRepeat: correctly save user scroll position on back (0a640758)
- ionItem: fix error when repeating (f370db45)
- ionSlideBox:
- modal: Remove modal flicker, closes #1150 (d2ebed84)
- scrollView: recalculate size on mousewheel scroll (89a9ed15)
- select: Select options w/ mouse events, closes #1251 (e3306293)
- tap: input[file] clicks within ion-content, closes #1237 (05a6d7cc)
- toggle: Right side padding for item-complex, closes #1091 (45106a6a)
- transitions: Disable transitions on Android 2, closes #780 (9c58d47b)
- viewport:
- $ionicLoading: on android, no back button action while loading (fc8711c7, closes #1273)
- $ionicModal: close on backdrop click on desktop/tablet (554c4398, closes #1087)
- ionNavBar: allow navbar inside ion-view to transition whole bar (42177c3b, closes #1232)
- sideMenu: make android back button close side menu (10103559, closes #1264)
- $ionicModal: do not inherit has-header etc from parent scope (6c0c8350, closes #1191)
- .pane: make pane class have overflow: hidden; fixes scrolling whole page from header/footer errors (dca87e2c, closes #1218)
- android-2.2: use string notation for reserved 'class' keyword (3bcf06f2, closes #1228)
- collectionRepeat: allow percent expressions (94bcbf75)
- infiniteScroll: allow to fire if list does not fill up screen (e35b95e1)
- ionHeaderBar: have no side effects with content in other views (7fd31b6a, closes #1095)
- ionList: make reorder follow an offset list as it scrolls (3a68a2c9)
- ionRadio: pass name property down to input element (9995f46b, closes #1229)
- ionTab: make it so tabNav works with ngRepeat (288d4ac2)
- ionView:
- scrollView: stop polluting global.core (8992e7c9)
- $ionicActionSheet: allow html binding of buttons and title (3e5b39f2, closes #1219)
- $ionicPopup: on android, make back button close popup (b87bcb30, closes #1222)
- $ionicSlideBoxDelegate: add enableSlide(true/false) method (e003bf18, closes #1122)
- $ionicActionSheet: provide default functions for options (ba39fb00, closes #1013)
- $ionicLoading: stop race condition with show and hide (eb1dee93, closes #1100)
- $ionicModal: make it use jqLite#remove() (104c6420, closes #1138)
- $ionicPopup:
- active: Taps/clicks now use .activated instead of .active, closes #913 (870dcd6f)
- bar: Increased button icon font size (8847774f)
- checkbox:
- header: Header input too long on Android 4.2, closes #1081 (b654e02e)
- input: Fix to hide input overlays on old Android (0e9072e4)
- ion-scroll:
- ionContent:
- ionHeaderBar:
- ionInfiniteScroll:
- ionList:
- disable swiping of items while option buttons are shown (81676e6e)
- do not let option button click propagate to item (a845ff34)
- disable tap on element being edited (634b3971)
- make reorder position work if list is offset (90da2da6)
- show reorder/delete on item creation if list is showing (09a77299, closes #1181)
- ionNavBar: adjust has-header if ionNavBar is hidden (41b73abf, closes #927)
- ionNavButtons:
- 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)
- ionicPopup: if input exists, focus it. else, focus first button (93aa16a7, closes #1176)
- 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)
- listView: fixed active state on scroll (040af824)
- loading: fix not hiding after two shows, always cancel delay (4216266f, closes #1130)
- modal: Increase delay of removing .modal-open to prevent focus under modals (83fd11c5)
- 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)
- tabs: Tab icon align within nested tabs, closes #1093 (2a6f7029)
- tabs-item-hide: only hide tab nav items (a7eb521c)
- 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)
- $ionicBackdrop: add backdrop show/hide service (730a33b9, closes #1084)
- $ionicModal:
- $ionicNavBarDelegate:
- $ionicScrollDelegate:
- $ionicSideMenuDelegate:
- avatar: Adding .item-avatar-left and deprecating .item-avatar (9bac6050)
- collection-repeat: add repeat lsdirective for huge lists (f0a1c037)
- 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
:afteritem 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
titleattribute 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:
- Increase the ghost click prevent delay for grade C devices (001bcca4)
- enter key submission blocked. (72ee799c, closes #819)
- Click Events In SlideBox Fire Multiple Times, closes #808 (f8a71377)
- 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
titleattr (aa30faf8, closes #804) - item:
- Restructure item editing css for added reusability and organization (07c824db)
- fix avatar/thumbnail in .item-complex, and avatar misspelling (947b8d69)
- listView:
- send index on delete. (75107771, closes #849)
- only allow one swipeable item open. (73b750fb, closes #763)
- No slide drag if no hidden buttons. (4e605979, closes #847)
- pointer: Add pointer styling to .item[ng-click], closes #858 (aa280910)
- popup:
- Ensure popup is usable on top of a modal, closes #838 (6ebfe776)
- focus popup. (dddc34d8, closes #820)
- 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:
- browserify issue: undefined core (cd27e1b7, closes #825)
- pull to refresh spin back. (049aabc7, closes #774)
- show bar with mouse wheel. (d5a69575, closes #809)
- don't show bars if not scrolling. (cb686636, closes #805)
- tabs: Renamed .tab-item active state from .active to .tab-item-active, closes #866 (24160aa0)
- tap:
- Trigger clicks if touch/click held for more than 250ms, closes #791 (60e45333)
- Reset startCoordinates on touchend/mouseup, closes #874 (76a53134)
- Remove select element from tap checking, closes #836 (3d917c83)
- 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)
- ionic: remove all delegates (dbe4e390)
- ionicNavBar: add getTitle() and getPreviousTitle() methods (215b1c1e)
- loadingView:
- add setContent method (366bd686, closes #732)
- add setContent method (e5cba05e)
- 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-typeandtabs-styleremoved. 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-buttonsfrom 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
iconandtextattributes (5f2c32ea)
- allow configuration of icon and text through
- ionRefresher: allow custom text & icons through
pulling-text,pulling-icon,refreshing-text,refreshing-iconattributes. (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-continueattribute 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.transformto 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-contentattribute (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
badgeattribute - Remember the previous scroll of a page when going back to it
Breaking Changes
bower install ionic: release files are now located in thereleasefolder, 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.