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 * ``, 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 * * * * * * * * * Hello! * * * * ``` * * @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. * *
* * ### 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 ``. * * * ```html * * * * Back * *

* *

* * * ``` */ 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( '

' + '

' + '

' + '

' + '

' ); 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); }); } } }; }]);