mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
#### Refactor: * **Navigation:** Refactored navigation for improved performance, reduce DOM manipulations, increase transition FPS, cached views, smoother transitions, platform specific transitions with added configurable controls for transition animation and direction. * **Cached Views:** Previously as a user navigated an app, each leaving 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. When a view is navigated away from, its element is 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 (set to 0), or change the maximum number of views to cache. * **Angular v1.3:** Upgraded Ionic’s 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 promise, whereas in v1.2 animations used callbacks. #### Features: * **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 leaving view from center to left. However, Android will transition with the entering 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. * **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. However, both can be overridden in numerous ways: config variable, view attribute, stateProvider property, or attribute on the button/link that initiated the transition. * **enable-menu-with-back-views:** The `enable-menu-with-back-views` attribute determines if the side menu is enabled when the back button is showing. When set to `false`, any buttons/links with the `menuToggle` directive 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), then any menuToggle buttons will show again, and menus will be enabled again. * **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 `ionNavBackButton` directive now should be empty, such as `<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. * **navBar button primary/secondary sides:** Primary and secondary sides are now the recommended values for the `side` attribute, 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 `primary` and `secondary` so buttons correctly map to the side familiar to users of a platform. However, in cases where buttons should always be on an exact side, both `left` and `right` sides are still available. * **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 `none` will disable an animation. #### Breaking Changes: * **Animation CSS:** The CSS for view transitions have changed. This is a breaking change only if Ionic apps had customized Ionic’s animation CSS. * **$ionicPlatformDefaults:** Platform config variables are no longer in the $ionicPlatformDefaults constant, but within `$ionicConfig`. * **$ionicViewService:** In the navigation refactoring, $ionicViewService was split up into two factories, `$ionicViewSwitcher` and `$ionicHistory`. The `$ionicHistory` is largely what `$ionicViewService`, but between the two factories there is a better separation of concerns for improved testing. * **navClear:** The navClear directive was created to do what the new side menu `enable-menu-with-back-views` attribute accomplishes. Additionally, the new `navTransition` and `navDirection` directives are more useful and granular than the navClear directive. * **scrollView.rememberScrollPosition:** This method has been removed since it is no longer needed with cached views. #### Deprecated: * **ionView.title:** The `ionView` directive used the `title` attribute, but this can cause the tooltip to show up on desktop browsers. The `title` attribute will still work for backwards compatibility, but we now recommend using `view-title`, such as `<ion-view view-title=”My Title”>`. * **ionNavView animation attribute removed:** The animation attribute is no longer used for nav views. Instead use `$ionicConfig`. * **ionNavBar animation attribute removed:** The animation attribute is no longer used for nav bars. Instead use `$ionicConfig`.
147 lines
4.5 KiB
JavaScript
147 lines
4.5 KiB
JavaScript
IonicModule
|
|
.controller('$ionicNavView', [
|
|
'$scope',
|
|
'$element',
|
|
'$attrs',
|
|
'$ionicNavBarDelegate',
|
|
'$ionicHistory',
|
|
'$ionicViewSwitcher',
|
|
'$ionicConfig',
|
|
function($scope, $element, $attrs, $ionicNavBarDelegate, $ionicHistory, $ionicViewSwitcher, $ionicConfig) {
|
|
var self = this;
|
|
var direction;
|
|
var isPrimary = false;
|
|
var navBarDelegate;
|
|
|
|
|
|
self.init = function() {
|
|
var navViewName = $attrs.name || '';
|
|
|
|
// Find the details of the parent view directive (if any) and use it
|
|
// to derive our own qualified view name, then hang our own details
|
|
// off the DOM so child directives can find it.
|
|
var parent = $element.parent().inheritedData('$uiView');
|
|
var parentViewName = ((parent && parent.state) ? parent.state.name : '');
|
|
if (navViewName.indexOf('@') < 0) navViewName = navViewName + '@' + parentViewName;
|
|
|
|
var viewData = { name: navViewName, state: null };
|
|
$element.data('$uiView', viewData);
|
|
|
|
return viewData;
|
|
};
|
|
|
|
|
|
self.register = function(viewLocals) {
|
|
// register that a view is coming in and get info on how it should transition
|
|
var isAbstractView = viewLocals && viewLocals.$$state && viewLocals.$$state.self && viewLocals.$$state.self.abstract;
|
|
var registerData = $ionicHistory.register($scope, isAbstractView);
|
|
|
|
// update which direction
|
|
self.update(registerData);
|
|
|
|
// begin rendering and transitioning
|
|
self.render(registerData, viewLocals);
|
|
};
|
|
|
|
|
|
self.update = function(registerData) {
|
|
// always reset that this is the primary navView
|
|
isPrimary = true;
|
|
|
|
// remember what direction this navView should use
|
|
// this may get updated later by a child navView
|
|
direction = registerData.direction;
|
|
|
|
var parentNavViewCtrl = $element.parent().inheritedData('$ionNavViewController');
|
|
if (parentNavViewCtrl) {
|
|
// this navView is nested inside another one
|
|
// update the parent to use this direction and not
|
|
// the other it originally was set to
|
|
|
|
// inform the parent navView that it is not the primary navView
|
|
parentNavViewCtrl.isPrimary(false);
|
|
|
|
if (direction === 'enter' || direction === 'exit') {
|
|
// they're entering/exiting a history
|
|
// find parent navViewController
|
|
parentNavViewCtrl.direction(direction);
|
|
|
|
if (direction === 'enter') {
|
|
// reset the direction so this navView doesn't animate
|
|
// because it's parent will
|
|
direction = 'none';
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
self.render = function(registerData, viewLocals) {
|
|
var enteringView = $ionicHistory.getViewById(registerData.viewId) || {};
|
|
|
|
// register the view and figure out where it lives in the various
|
|
// histories and nav stacks, along with how views should enter/leave
|
|
var switcher = $ionicViewSwitcher.create($scope, $element, viewLocals, enteringView);
|
|
|
|
// init the rendering of views for this navView directive
|
|
switcher.init(registerData, function(){
|
|
// the view is now compiled, in the dom and linked, now lets transition the views.
|
|
// this uses a callback incase THIS nav-view has a nested nav-view, and after the NESTED
|
|
// nav-view links, the NESTED nav-view would update which direction THIS nav-view should use
|
|
switcher.transition( self.direction(), registerData.showBack );
|
|
});
|
|
|
|
};
|
|
|
|
|
|
self.beforeEnter = function(transData) {
|
|
if (isPrimary) {
|
|
// only update this nav-view's nav-bar if this is the primary nav-view
|
|
navBarDelegate = transData.navBarDelegate;
|
|
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
|
|
associatedNavBarCtrl && associatedNavBarCtrl.update(transData);
|
|
}
|
|
};
|
|
|
|
|
|
self.showBar = function(val) {
|
|
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
|
|
associatedNavBarCtrl && associatedNavBarCtrl.showBar(val);
|
|
};
|
|
|
|
|
|
self.showBackButton = function(val) {
|
|
var associatedNavBarCtrl = getAssociatedNavBarCtrl();
|
|
associatedNavBarCtrl && associatedNavBarCtrl.showBackButton(val);
|
|
};
|
|
|
|
|
|
self.isPrimary = function(val) {
|
|
if (arguments.length) {
|
|
isPrimary = val;
|
|
}
|
|
return isPrimary;
|
|
};
|
|
|
|
|
|
self.direction = function(val) {
|
|
if (arguments.length) {
|
|
direction = val;
|
|
}
|
|
return direction;
|
|
};
|
|
|
|
|
|
function getAssociatedNavBarCtrl() {
|
|
if (navBarDelegate) {
|
|
for (var x=0; x<$ionicNavBarDelegate._instances.length; x++) {
|
|
if ($ionicNavBarDelegate._instances[x].$$delegateHandle == navBarDelegate) {
|
|
return $ionicNavBarDelegate._instances[x];
|
|
}
|
|
}
|
|
}
|
|
return $element.inheritedData('$ionNavBarController');
|
|
}
|
|
|
|
}]);
|