mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(ionNavBar,ionHeaderBar): use declarative syntax
BREAKING CHANGE: navBar is majorly different. Manually write this when changelog is released. Add link to docs.
This commit is contained in:
Andy Joslin
172
js/ext/angular/src/directive/ionicBar.js
vendored
172
js/ext/angular/src/directive/ionicBar.js
vendored
@@ -18,108 +18,98 @@ angular.module('ionic.ui.header', ['ngAnimate', 'ngSanitize'])
|
||||
* @name ionHeaderBar
|
||||
* @module ionic
|
||||
* @restrict E
|
||||
* @controller ionicBar
|
||||
*
|
||||
* @description
|
||||
* While Ionic provides simple Header and Footer bars that can be created through
|
||||
* HTML and CSS alone, Header bars specifically can be extended in order to
|
||||
* provide dynamic layout features such as auto-title centering and animation.
|
||||
* They are also used by the Views and Navigation Controller to animate a title
|
||||
* on navigation and toggle a back button.
|
||||
* Adds a fixed header bar above some content.
|
||||
*
|
||||
* The main header bar feature provided is auto title centering.
|
||||
* In this situation, the title text will center itself until either the
|
||||
* left or right button content is too wide for the label to center.
|
||||
* In that case, it will slide left or right until it can fit.
|
||||
* You can also align the title left for a more Android-friendly header.
|
||||
* Is able to have left or right buttons, and additionally its title can be
|
||||
* aligned through the {@link ionic.controller:ionicBar ionicBar controller}.
|
||||
*
|
||||
* Using two-way data binding, the header bar will automatically
|
||||
* readjust the heading title alignment when the title or buttons change.
|
||||
*
|
||||
* @param {string} title The title use on the headerBar.
|
||||
* @param {expression=} leftButtons Point to an array of buttons to put on the left of the bar.
|
||||
* @param {expression=} rightButtons Point to an array of buttons to put on the right of the bar.
|
||||
* @param {string=} type The type of the bar, for example 'bar-positive'.
|
||||
* @param {string=} align Where to align the title. 'left', 'right', or 'center'. Defaults to 'center'.
|
||||
* @param {string=} model The model to assign this headerBar's
|
||||
* {@link ionic.controller:ionicBar ionicBar controller} to.
|
||||
* Defaults to assigning to $scope.headerBarController.
|
||||
* @param {string=} align-title Where to align the title at the start.
|
||||
* Avaialble: 'left', 'right', or 'center'. Defaults to 'center'.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-header-bar
|
||||
* title="{{myTitle}}"
|
||||
* left-buttons="leftButtons"
|
||||
* right-buttons="rightButtons"
|
||||
* type="bar-positive"
|
||||
* align-title="center">
|
||||
* <ion-header-bar align-title="left">
|
||||
* <div class="buttons">
|
||||
* <button class="button">Left Button</button>
|
||||
* </div>
|
||||
* <h1 class="title">Title!</h1>
|
||||
* <div class="buttons">
|
||||
* <button class="button">Right Button</button>
|
||||
* </div>
|
||||
* </ion-header-bar>
|
||||
* <ion-content>
|
||||
* Some content!
|
||||
* </ion-content>
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
.directive('ionHeaderBar', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<header class="bar bar-header">\
|
||||
<div class="buttons">\
|
||||
<button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
|
||||
</button>\
|
||||
</div>\
|
||||
<h1 class="title" ng-bind-html="title"></h1>\
|
||||
<div class="buttons">\
|
||||
<button ng-repeat="button in rightButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ng-bind-html="button.content">\
|
||||
</button>\
|
||||
</div>\
|
||||
</header>',
|
||||
.directive('ionHeaderBar', barDirective(true))
|
||||
|
||||
scope: {
|
||||
leftButtons: '=',
|
||||
rightButtons: '=',
|
||||
title: '@',
|
||||
type: '@',
|
||||
alignTitle: '@'
|
||||
},
|
||||
link: function($scope, $element, $attr) {
|
||||
var hb = new ionic.views.HeaderBar({
|
||||
el: $element[0],
|
||||
alignTitle: $scope.alignTitle || 'center'
|
||||
});
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name ionFooterBar
|
||||
* @module ionic
|
||||
* @restrict E
|
||||
* @controller ionicBar
|
||||
*
|
||||
* @description
|
||||
* Adds a fixed footer bar below some content.
|
||||
*
|
||||
* Is able to have left or right buttons, and additionally its title can be
|
||||
* aligned through the {@link ionic.controller:ionicBar ionicBar controller}.
|
||||
*
|
||||
* @param {string=} model The model to assign this footerBar's
|
||||
* {@link ionic.controller:ionicBar ionicBar controller} to.
|
||||
* Defaults to assigning to $scope.footerBarController.
|
||||
* @param {string=} align-title Where to align the title at the start.
|
||||
* Avaialble: 'left', 'right', or 'center'. Defaults to 'center'.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-content>
|
||||
* Some content!
|
||||
* </ion-content>
|
||||
* <ion-footer-bar align-title="left">
|
||||
* <div class="buttons">
|
||||
* <button class="button">Left Button</button>
|
||||
* </div>
|
||||
* <h1 class="title">Title!</h1>
|
||||
* <div class="buttons">
|
||||
* <button class="button">Right Button</button>
|
||||
* </div>
|
||||
* </ion-footer-bar>
|
||||
* ```
|
||||
*/
|
||||
.directive('ionFooterBar', barDirective(false));
|
||||
|
||||
$element.addClass($scope.type);
|
||||
function barDirective(isHeader) {
|
||||
var BAR_TEMPLATE = isHeader ?
|
||||
'<header class="bar bar-header" ng-transclude></header>' :
|
||||
'<footer class="bar bar-header" ng-transclude></footer>';
|
||||
var BAR_MODEL_DEFAULT = isHeader ?
|
||||
'headerBarController' :
|
||||
'footerBarController';
|
||||
return ['$parse', function($parse) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: BAR_TEMPLATE,
|
||||
link: function($scope, $element, $attr) {
|
||||
var hb = new ionic.views.HeaderBar({
|
||||
el: $element[0],
|
||||
alignTitle: $attr.alignTitle || 'center'
|
||||
});
|
||||
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
$scope.$watchCollection('leftButtons', function(val) {
|
||||
// Resize the title since the buttons have changed
|
||||
hb.align();
|
||||
});
|
||||
|
||||
$scope.$watchCollection('rightButtons', function(val) {
|
||||
// Resize the title since the buttons have changed
|
||||
hb.align();
|
||||
});
|
||||
|
||||
$scope.$watch('title', function(val) {
|
||||
// Resize the title since the title has changed
|
||||
hb.align();
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('ionFooterBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<footer class="bar bar-footer" ng-transclude>\
|
||||
</footer>',
|
||||
|
||||
scope: {
|
||||
type: '@',
|
||||
},
|
||||
|
||||
link: function($scope, $element, $attr) {
|
||||
$element.addClass($scope.type);
|
||||
}
|
||||
};
|
||||
});
|
||||
$parse($attr.model || BAR_MODEL_DEFAULT).assign($scope.$parent, hb);
|
||||
}
|
||||
};
|
||||
}];
|
||||
}
|
||||
|
||||
})(ionic);
|
||||
|
||||
Reference in New Issue
Block a user