/** * @ngdoc directive * @name ionNavBackButton * @module ionic * @restrict E * @parent ionNavBar * @description * Creates a back button inside an {@link ionic.directive:ionNavBar}. * * The back button will appear when the user is able to go back in the current navigation stack. By * default, the markup of the back button is automatically built using platform-appropriate defaults * (iOS back button icon on iOS and Android icon on Android). * * Additionally, the button is automatically set to `$ionicGoBack()` on click/tap. By default, the * app will navigate back one view when the back button is clicked. More advanced behavior is also * possible, as outlined below. * * @usage * * Recommended markup for default settings: * * ```html * * * * * ``` * * With custom inner markup, and automatically adds a default click action: * * ```html * * * Back * * * ``` * * With custom inner markup and custom click action, using {@link ionic.service:$ionicHistory}: * * ```html * * * Back * * * ``` * ```js * function MyCtrl($scope, $ionicHistory) { * $scope.myGoBack = function() { * $ionicHistory.goBack(); * }; * } * ``` */ IonicModule .directive('ionNavBackButton', ['$ionicConfig', '$document', function($ionicConfig, $document) { return { restrict: 'E', require: '^ionNavBar', compile: function(tElement, tAttrs) { // clone the back button, but as a
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 hide 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 = ' ' + 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 += '' + $ionicConfig.backButton.text() + ''; } if (!hasPreviousTitle && $ionicConfig.backButton.previousTitleText()) { buttonTextEle.innerHTML += ''; } 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; } }; } }; }]);