mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
144 lines
4.3 KiB
JavaScript
144 lines
4.3 KiB
JavaScript
|
|
IonicModule.constant('$ionicNavBarConfig', {
|
|
transition: 'nav-title-slide-ios7',
|
|
alignTitle: 'center',
|
|
backButtonIcon: 'ion-ios7-arrow-back'
|
|
});
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionNavBar
|
|
* @module ionic
|
|
* @delegate ionic.service:$ionicNavBarDelegate
|
|
* @restrict E
|
|
*
|
|
* @description
|
|
* If we have an {@link ionic.directive:ionNavView} directive, we can also create an
|
|
* `<ion-nav-bar>`, which will create a topbar that updates as the application state changes.
|
|
*
|
|
* We can add a back button by putting an {@link ionic.directive:ionNavBackButton} inside.
|
|
*
|
|
* We can add buttons depending on the currently visible view using
|
|
* {@link ionic.directive:ionNavButtons}.
|
|
*
|
|
* Add an [animation class](/docs/components#animations) to the element via the
|
|
* `animation` attribute to enable animated changing of titles
|
|
* (recommended: 'nav-title-slide-ios7').
|
|
*
|
|
* Note that the ion-nav-bar element will only work correctly if your content has an
|
|
* ionView around it.
|
|
*
|
|
* @usage
|
|
*
|
|
* ```html
|
|
* <body ng-app="starter">
|
|
* <!-- The nav bar that will be updated as we navigate -->
|
|
* <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
|
|
* </ion-nav-bar>
|
|
*
|
|
* <!-- where the initial view template will be rendered -->
|
|
* <ion-nav-view>
|
|
* <ion-view>
|
|
* <ion-content>Hello!</ion-content>
|
|
* </ion-view>
|
|
* </ion-nav-view>
|
|
* </body>
|
|
* ```
|
|
*
|
|
* @param {string=} delegate-handle The handle used to identify this navBar
|
|
* with {@link ionic.service:$ionicNavBarDelegate}.
|
|
* @param align-title {string=} Where to align the title of the navbar.
|
|
* Available: 'left', 'right', 'center'. Defaults to 'center'.
|
|
* @param {boolean=} no-tap-scroll By default, the navbar will scroll the content
|
|
* to the top when tapped. Set no-tap-scroll to true to disable this behavior.
|
|
*
|
|
* </table><br/>
|
|
*
|
|
* ### Alternative Usage
|
|
*
|
|
* Alternatively, you may put ion-nav-bar inside of each individual view's ion-view element.
|
|
* This will allow you to have the whole navbar, not just its contents, transition every view change.
|
|
*
|
|
* This is similar to using a header bar inside your ion-view, except it will have all the power of a navbar.
|
|
*
|
|
* If you do this, simply put nav buttons inside the navbar itself; do not use `<ion-nav-buttons>`.
|
|
*
|
|
*
|
|
* ```html
|
|
* <ion-view title="myTitle">
|
|
* <ion-nav-bar class="bar-positive">
|
|
* <ion-nav-back-button>
|
|
* Back
|
|
* </ion-nav-back-button>
|
|
* <div class="buttons right-buttons">
|
|
* <button class="button">
|
|
* Right Button
|
|
* </button>
|
|
* </div>
|
|
* </ion-nav-bar>
|
|
* </ion-view>
|
|
* ```
|
|
*/
|
|
IonicModule
|
|
.directive('ionNavBar', [
|
|
'$ionicViewService',
|
|
'$rootScope',
|
|
'$animate',
|
|
'$compile',
|
|
'$ionicNavBarConfig',
|
|
function($ionicViewService, $rootScope, $animate, $compile, $ionicNavBarConfig) {
|
|
|
|
return {
|
|
restrict: 'E',
|
|
controller: '$ionicNavBar',
|
|
scope: true,
|
|
compile: function(tElement, tAttrs) {
|
|
//We cannot transclude here because it breaks element.data() inheritance on compile
|
|
tElement
|
|
.addClass('bar bar-header nav-bar')
|
|
.append(
|
|
'<div class="buttons left-buttons"> ' +
|
|
'</div>' +
|
|
'<h1 ng-bind-html="title" class="title"></h1>' +
|
|
'<div class="buttons right-buttons"> ' +
|
|
'</div>'
|
|
);
|
|
|
|
if (isDefined(tAttrs.animation)) {
|
|
tElement.addClass(tAttrs.animation);
|
|
} else {
|
|
tElement.addClass($ionicNavBarConfig.transition);
|
|
}
|
|
|
|
return { pre: prelink };
|
|
function prelink($scope, $element, $attr, navBarCtrl) {
|
|
navBarCtrl._headerBarView = new ionic.views.HeaderBar({
|
|
el: $element[0],
|
|
alignTitle: $attr.alignTitle || $ionicNavBarConfig.alignTitle || 'center'
|
|
});
|
|
|
|
//defaults
|
|
$scope.backButtonShown = false;
|
|
$scope.shouldAnimate = true;
|
|
$scope.isReverse = false;
|
|
$scope.isInvisible = true;
|
|
|
|
$scope.$on('$destroy', function() {
|
|
$scope.$parent.$hasHeader = false;
|
|
});
|
|
|
|
$scope.$watch(function() {
|
|
return ($scope.isReverse ? ' reverse' : '') +
|
|
($scope.isInvisible ? ' invisible' : '') +
|
|
(!$scope.shouldAnimate ? ' no-animation' : '');
|
|
}, function(className, oldClassName) {
|
|
$element.removeClass(oldClassName);
|
|
$element.addClass(className);
|
|
});
|
|
|
|
}
|
|
}
|
|
};
|
|
}]);
|
|
|