mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
57bf4f1683
Add the .header-item class to each of the root child items of a nav header bar. This gives CSS more power to state what should and should not be shown during the different states of a transition, specifically for iOS nav bar transitions.
135 lines
4.2 KiB
JavaScript
135 lines
4.2 KiB
JavaScript
/**
|
|
* @ngdoc directive
|
|
* @name ionNavBackButton
|
|
* @module ionic
|
|
* @restrict E
|
|
* @parent ionNavBar
|
|
* @description
|
|
* Creates a back button inside an {@link ionic.directive:ionNavBar}.
|
|
*
|
|
* Will show up when the user is able to go back in the current navigation stack. By default,
|
|
* the inner HTML of the back button is automatically built using platform defaults (iOS back button
|
|
* icon on iOS, and Android icon on Android).
|
|
*
|
|
* Additionally, it's click behavior is automatically wired up to `$ionicGoBack()`.By default the
|
|
* app will navigation back one view when the back button is clicked. If you wish for more
|
|
* advanced behavior, see the examples below.
|
|
*
|
|
* @usage
|
|
*
|
|
* Recommended markup for default settings:
|
|
*
|
|
* ```html
|
|
* <ion-nav-bar>
|
|
* <ion-nav-back-button>
|
|
* </ion-nav-back-button>
|
|
* </ion-nav-bar>
|
|
* ```
|
|
*
|
|
* With custom inner markup, and automatically adds a default click action:
|
|
*
|
|
* ```html
|
|
* <ion-nav-bar>
|
|
* <ion-nav-back-button class="button-clear">
|
|
* <i class="ion-arrow-left-c"></i> Back
|
|
* </ion-nav-back-button>
|
|
* </ion-nav-bar>
|
|
* ```
|
|
*
|
|
* With custom inner markup and custom click action, using {@link ionic.service:$ionicNavBarDelegate}:
|
|
*
|
|
* ```html
|
|
* <ion-nav-bar ng-controller="MyCtrl">
|
|
* <ion-nav-back-button class="button-clear"
|
|
* ng-click="myGoBack()">
|
|
* <i class="ion-arrow-left-c"></i> Back
|
|
* </ion-nav-back-button>
|
|
* </ion-nav-bar>
|
|
* ```
|
|
* ```js
|
|
* function MyCtrl($scope, $ionicNavBarDelegate) {
|
|
* $scope.myGoBack = function() {
|
|
* $ionicNavBarDelegate.back();
|
|
* };
|
|
* }
|
|
* ```
|
|
*/
|
|
IonicModule
|
|
.directive('ionNavBackButton', ['$ionicConfig', '$document', function($ionicConfig, $document) {
|
|
return {
|
|
restrict: 'E',
|
|
require: '^ionNavBar',
|
|
compile: function(tElement, tAttrs) {
|
|
|
|
// clone the back button, but as a <div>
|
|
var buttonEle = $document[0].createElement('button');
|
|
for (var n in tAttrs.$attr) {
|
|
buttonEle.setAttribute(tAttrs.$attr[n], tAttrs[n]);
|
|
}
|
|
|
|
if (!tAttrs.ngClick) {
|
|
buttonEle.setAttribute('ng-click', '$ionicGoBack($event)');
|
|
}
|
|
|
|
buttonEle.className = 'button back-button back-disabled buttons ' + (tElement.attr('class') || '');
|
|
buttonEle.innerHTML = tElement.html() || '';
|
|
|
|
var childNode;
|
|
var hasIcon = hasIconClass(tElement[0]);
|
|
var hasInnerText;
|
|
var hasButtonText;
|
|
var hasPreviousTitle;
|
|
|
|
for (var x = 0; x < tElement[0].childNodes.length; x++) {
|
|
childNode = tElement[0].childNodes[x];
|
|
if (childNode.nodeType === 1) {
|
|
if (hasIconClass(childNode)) {
|
|
hasIcon = true;
|
|
} else if (childNode.classList.contains('default-title')) {
|
|
hasButtonText = true;
|
|
} else if (childNode.classList.contains('previous-title')) {
|
|
hasPreviousTitle = true;
|
|
}
|
|
} else if (!hasInnerText && childNode.nodeType === 3) {
|
|
hasInnerText = !!childNode.nodeValue.trim();
|
|
}
|
|
}
|
|
|
|
function hasIconClass(ele) {
|
|
return /ion-|icon/.test(ele.className);
|
|
}
|
|
|
|
var defaultIcon = $ionicConfig.backButton.icon();
|
|
if (!hasIcon && defaultIcon && defaultIcon !== 'none') {
|
|
buttonEle.innerHTML = '<i class="icon ' + defaultIcon + '"></i> ' + buttonEle.innerHTML;
|
|
buttonEle.className += ' button-clear';
|
|
}
|
|
|
|
if (!hasInnerText) {
|
|
var buttonTextEle = $document[0].createElement('span');
|
|
buttonTextEle.className = 'back-text';
|
|
|
|
if (!hasButtonText && $ionicConfig.backButton.text()) {
|
|
buttonTextEle.innerHTML += '<span class="default-title">' + $ionicConfig.backButton.text() + '</span>';
|
|
}
|
|
if (!hasPreviousTitle && $ionicConfig.backButton.previousTitleText()) {
|
|
buttonTextEle.innerHTML += '<span class="previous-title"></span>';
|
|
}
|
|
buttonEle.appendChild(buttonTextEle);
|
|
|
|
}
|
|
|
|
tElement.attr('class', 'hide');
|
|
tElement.empty();
|
|
|
|
return {
|
|
pre: function($scope, $element, $attr, navBarCtrl) {
|
|
// only register the plain HTML, the navBarCtrl takes care of scope/compile/link
|
|
navBarCtrl.navElement('backButton', buttonEle.outerHTML);
|
|
buttonEle = null;
|
|
}
|
|
};
|
|
}
|
|
};
|
|
}]);
|