mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
angular-ui router
This commit is contained in:
Adam Bradley
17
js/ext/angular/src/directive/ionicContent.js
vendored
17
js/ext/angular/src/directive/ionicContent.js
vendored
@@ -39,24 +39,25 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
|
||||
scrollbarY: '@',
|
||||
scrollEventInterval: '@'
|
||||
},
|
||||
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr) {
|
||||
if(attr.hasHeader == "true") { element.addClass('has-header'); }
|
||||
if(attr.hasSubheader == "true") { element.addClass('has-subheader'); }
|
||||
if(attr.hasFooter == "true") { element.addClass('has-footer'); }
|
||||
if(attr.hasTabs == "true") { element.addClass('has-tabs'); }
|
||||
|
||||
return function link($scope, $element, $attr) {
|
||||
var clone, sc, sv,
|
||||
addedPadding = false,
|
||||
c = $element.eq(0);
|
||||
|
||||
if(attr.hasHeader == "true") { c.addClass('has-header'); }
|
||||
if(attr.hasSubheader == "true") { c.addClass('has-subheader'); }
|
||||
if(attr.hasFooter == "true") { c.addClass('has-footer'); }
|
||||
if(attr.hasTabs == "true") { c.addClass('has-tabs'); }
|
||||
|
||||
// If they want plain overflow scrolling, add that as a class
|
||||
if($scope.scroll === "false") {
|
||||
clone = transclude($scope.$parent);
|
||||
$element.append(clone);
|
||||
} else if(attr.overflowScroll === "true") {
|
||||
c.addClass('overflow-scroll');
|
||||
clone = transclude($scope.$parent);
|
||||
clone = transclude($scope.$parent);
|
||||
$element.append(clone);
|
||||
} else {
|
||||
sc = document.createElement('div');
|
||||
@@ -84,7 +85,6 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// Otherwise, supercharge this baby!
|
||||
$timeout(function() {
|
||||
sv = new ionic.views.Scroll({
|
||||
@@ -119,7 +119,6 @@ angular.module('ionic.ui.content', ['ionic.ui.service'])
|
||||
// Register for scroll delegate event handling
|
||||
ScrollDelegate.register($scope, $element);
|
||||
|
||||
|
||||
// Let child scopes access this
|
||||
$scope.$parent.scrollView = sv;
|
||||
});
|
||||
|
||||
412
js/ext/angular/src/directive/ionicNavRouter.js
vendored
412
js/ext/angular/src/directive/ionicNavRouter.js
vendored
@@ -1,412 +0,0 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @description
|
||||
* The NavController is a navigation stack View Controller modelled off of
|
||||
* UINavigationController from Cocoa Touch. With the Nav Controller, you can
|
||||
* "push" new "pages" on to the navigation stack, and then pop them off to go
|
||||
* back. The NavController controls a navigation bar with a back button and title
|
||||
* which updates as the pages switch.
|
||||
*
|
||||
* The NavController makes sure to not recycle scopes of old pages
|
||||
* so that a pop will still show the same state that the user left.
|
||||
*
|
||||
* However, once a page is popped, its scope is destroyed and will have to be
|
||||
* recreated then next time it is pushed.
|
||||
*
|
||||
*/
|
||||
|
||||
var actualLocation = null;
|
||||
|
||||
angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
|
||||
|
||||
.run(['$rootScope', function($rootScope) {
|
||||
$rootScope.stackCursorPosition = 0;
|
||||
}])
|
||||
|
||||
.directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
// So you can require being under this
|
||||
controller: ['$scope', '$element', function($scope, $element) {
|
||||
this.navBar = {
|
||||
isVisible: false
|
||||
};
|
||||
$scope.navController = this;
|
||||
|
||||
this.goBack = function() {
|
||||
$scope.direction = 'back';
|
||||
};
|
||||
}],
|
||||
|
||||
link: function($scope, $element, $attr, ctrl) {
|
||||
if(!$element.length) return;
|
||||
|
||||
$scope.animation = $attr.animation;
|
||||
|
||||
$element[0].classList.add('noop-animation');
|
||||
|
||||
var isFirst = true;
|
||||
// Store whether we did an animation yet, to know if
|
||||
// we should let the first state animate
|
||||
var didAnimate = false;
|
||||
|
||||
var initTransition = function() {
|
||||
//$element.addClass($scope.animation);
|
||||
};
|
||||
|
||||
var reverseTransition = function() {
|
||||
$element[0].classList.remove('noop-animation');
|
||||
$element[0].classList.add($scope.animation);
|
||||
$element[0].classList.add('reverse');
|
||||
};
|
||||
|
||||
var forwardTransition = function() {
|
||||
$element[0].classList.remove('noop-animation');
|
||||
$element[0].classList.remove('reverse');
|
||||
$element[0].classList.add($scope.animation);
|
||||
};
|
||||
|
||||
$scope.$on('$routeChangeSuccess', function(e, a) {
|
||||
});
|
||||
$scope.$on('$routeChangeStart', function(e, next, current) {
|
||||
var back, historyState = $window.history.state;
|
||||
|
||||
back = $scope.direction == 'back' || (!!(historyState && historyState.position <= $rootScope.stackCursorPosition));
|
||||
|
||||
if(isFirst || (next && next.$$route && next.$$route.originalPath === "")) {
|
||||
// Don't animate
|
||||
isFirst = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if(didAnimate || $rootScope.stackCursorPosition > 0) {
|
||||
didAnimate = true;
|
||||
if(back) {
|
||||
reverseTransition();
|
||||
} else {
|
||||
forwardTransition();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on('$locationChangeSuccess', function(a, b, c) {
|
||||
// Store the new location
|
||||
$rootScope.actualLocation = $location.path();
|
||||
if(isFirst && $location.path() !== '/') {
|
||||
isFirst = false;
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on('navRouter.goBack', function(e) {
|
||||
ctrl.goBack();
|
||||
});
|
||||
|
||||
|
||||
// Keep track of location changes and update a stack pointer that tracks whether we are
|
||||
// going forwards or back
|
||||
$scope.$watch(function () { return $location.path(); }, function (newLocation, oldLocation) {
|
||||
if($rootScope.actualLocation === newLocation) {
|
||||
if(oldLocation === '') {// || newLocation == '/') {
|
||||
// initial route, skip this
|
||||
return;
|
||||
}
|
||||
|
||||
var back, historyState = $window.history.state;
|
||||
|
||||
back = $scope.direction == 'back' || (!!(historyState && historyState.position <= $rootScope.stackCursorPosition));
|
||||
|
||||
if (back) {
|
||||
//back button
|
||||
$rootScope.stackCursorPosition--;
|
||||
} else {
|
||||
//forward button
|
||||
$rootScope.stackCursorPosition++;
|
||||
}
|
||||
|
||||
$scope.direction = 'forwards';
|
||||
|
||||
} else {
|
||||
var currentRouteBeforeChange = $route.current;
|
||||
|
||||
if (currentRouteBeforeChange) {
|
||||
|
||||
$window.history.replaceState({
|
||||
position: $rootScope.stackCursorPosition
|
||||
});
|
||||
|
||||
$rootScope.stackCursorPosition++;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
/**
|
||||
* Our Nav Bar directive which updates as the controller state changes.
|
||||
*/
|
||||
.directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
|
||||
|
||||
/**
|
||||
* Perform an animation between one tab bar state and the next.
|
||||
* Right now this just animates the titles.
|
||||
*/
|
||||
var animate = function($scope, $element, oldTitle, data, cb) {
|
||||
var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
|
||||
|
||||
var newTitle = data.title;
|
||||
if(!oldTitle || oldTitle === newTitle) {
|
||||
cb();
|
||||
return;
|
||||
}
|
||||
|
||||
// Clone the old title and add a new one so we can show two animating in and out
|
||||
// add ng-leave and ng-enter during creation to prevent flickering when they are swapped during animation
|
||||
title = angular.element(titles[0]);
|
||||
oTitle = $compile('<h1 class="title ng-leave" ng-bind="oldTitle"></h1>')($scope);
|
||||
title.replaceWith(oTitle);
|
||||
nTitle = $compile('<h1 class="title ng-enter" ng-bind="currentTitle"></h1>')($scope);
|
||||
|
||||
var insert = $element[0].firstElementChild || null;
|
||||
|
||||
// Insert the new title
|
||||
$animate.enter(nTitle, $element, insert && angular.element(insert), function() {
|
||||
cb();
|
||||
});
|
||||
|
||||
// Remove the old title
|
||||
$animate.leave(angular.element(oTitle), function() {
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navRouter',
|
||||
replace: true,
|
||||
scope: {
|
||||
type: '@',
|
||||
backButtonType: '@',
|
||||
backButtonLabel: '@',
|
||||
backButtonIcon: '@',
|
||||
alignTitle: '@'
|
||||
},
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{invisible: !navController.navBar.isVisible}">' +
|
||||
'<div class="buttons"> ' +
|
||||
'<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonClass" ng-bind-html="backButtonLabel"></button>' +
|
||||
'<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" class="button no-animation {{button.type}}" ng-bind-html="button.content"></button>' +
|
||||
'</div>' +
|
||||
'<h1 class="title" ng-bind="currentTitle"></h1>' +
|
||||
'<div class="buttons" ng-if="rightButtons.length"> ' +
|
||||
'<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" class="button no-animation {{button.type}}" ng-bind-html="button.content"></button>' +
|
||||
'</div>' +
|
||||
'</header>',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
var backButton;
|
||||
|
||||
$element.addClass($attr.animation);
|
||||
|
||||
// Create the back button content and show/hide it based on scope settings
|
||||
$scope.enableBackButton = true;
|
||||
$scope.backButtonClass = $attr.backButtonType;
|
||||
if($attr.backButtonIcon) {
|
||||
$scope.backButtonClass += ' icon ' + $attr.backButtonIcon;
|
||||
}
|
||||
|
||||
// Listen for changes in the stack cursor position to indicate whether a back
|
||||
// button should be shown (this can still be disabled by the $scope.enableBackButton
|
||||
$rootScope.$watch('stackCursorPosition', function(value) {
|
||||
if(value > 0) {
|
||||
$scope.showBackButton = true;
|
||||
} else {
|
||||
$scope.showBackButton = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Store a reference to our nav controller
|
||||
$scope.navController = navCtrl;
|
||||
|
||||
// Initialize our header bar view which will handle resizing and aligning our title labels
|
||||
var hb = new ionic.views.HeaderBar({
|
||||
el: $element[0],
|
||||
alignTitle: $scope.alignTitle || 'center'
|
||||
});
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
// Add the type of header bar class to this element
|
||||
$element.addClass($scope.type);
|
||||
|
||||
var updateHeaderData = function(data) {
|
||||
var oldTitle = $scope.currentTitle;
|
||||
$scope.oldTitle = oldTitle;
|
||||
|
||||
if(typeof data.title !== 'undefined') {
|
||||
$scope.currentTitle = data.title;
|
||||
}
|
||||
|
||||
$scope.leftButtons = data.leftButtons;
|
||||
$scope.rightButtons = data.rightButtons;
|
||||
|
||||
if(typeof data.hideBackButton !== 'undefined') {
|
||||
$scope.enableBackButton = data.hideBackButton !== true;
|
||||
}
|
||||
|
||||
if(data.animate !== false && typeof data.title !== 'undefined') {
|
||||
animate($scope, $element, oldTitle, data, function() {
|
||||
hb.align();
|
||||
});
|
||||
} else {
|
||||
hb.align();
|
||||
}
|
||||
};
|
||||
|
||||
$scope.$parent.$on('navRouter.showBackButton', function(e, data) {
|
||||
$scope.enableBackButton = true;
|
||||
});
|
||||
|
||||
$scope.$parent.$on('navRouter.hideBackButton', function(e, data) {
|
||||
$scope.enableBackButton = false;
|
||||
});
|
||||
|
||||
// Listen for changes on title change, and update the title
|
||||
$scope.$parent.$on('navRouter.pageChanged', function(e, data) {
|
||||
updateHeaderData(data);
|
||||
});
|
||||
|
||||
$scope.$parent.$on('navRouter.pageShown', function(e, data) {
|
||||
updateHeaderData(data);
|
||||
});
|
||||
|
||||
$scope.$parent.$on('navRouter.titleChanged', function(e, data) {
|
||||
var oldTitle = $scope.currentTitle;
|
||||
$scope.oldTitle = oldTitle;
|
||||
|
||||
if(typeof data.title !== 'undefined') {
|
||||
$scope.currentTitle = data.title;
|
||||
}
|
||||
|
||||
if(data.animate !== false && typeof data.title !== 'undefined') {
|
||||
animate($scope, $element, oldTitle, data, function() {
|
||||
hb.align();
|
||||
});
|
||||
} else {
|
||||
hb.align();
|
||||
}
|
||||
});
|
||||
|
||||
// If a nav page changes the left or right buttons, update our scope vars
|
||||
$scope.$parent.$on('navRouter.leftButtonsChanged', function(e, data) {
|
||||
$scope.leftButtons = data;
|
||||
});
|
||||
$scope.$parent.$on('navRouter.rightButtonsChanged', function(e, data) {
|
||||
$scope.rightButtons = data;
|
||||
});
|
||||
|
||||
/*
|
||||
$scope.$parent.$on('navigation.push', function() {
|
||||
backButton = angular.element($element[0].querySelector('.button'));
|
||||
backButton.addClass($scope.backButtonType);
|
||||
hb.align();
|
||||
});
|
||||
$scope.$parent.$on('navigation.pop', function() {
|
||||
hb.align();
|
||||
});
|
||||
*/
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
//
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('navPage', ['$parse', function($parse) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navRouter',
|
||||
scope: {
|
||||
leftButtons: '=',
|
||||
rightButtons: '=',
|
||||
title: '=',
|
||||
icon: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
type: '@',
|
||||
alignTitle: '@',
|
||||
hideBackButton: '@',
|
||||
hideNavBar: '@',
|
||||
animate: '@',
|
||||
},
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
$element.addClass('pane');
|
||||
|
||||
// Should we hide a back button when this tab is shown
|
||||
$scope.hideBackButton = $scope.$eval($scope.hideBackButton);
|
||||
|
||||
$scope.hideNavBar = $scope.$eval($scope.hideNavBar);
|
||||
|
||||
navCtrl.navBar.isVisible = !$scope.hideNavBar;
|
||||
|
||||
if($scope.hideBackButton === true) {
|
||||
$scope.$emit('navRouter.hideBackButton');
|
||||
} else {
|
||||
$scope.$emit('navRouter.showBackButton');
|
||||
}
|
||||
|
||||
// Whether we should animate on tab change, also impacts whether we
|
||||
// tell any parent nav controller to animate
|
||||
$scope.animate = $scope.$eval($scope.animate);
|
||||
|
||||
|
||||
// watch for changes in the left buttons
|
||||
$scope.$watch('leftButtons', function(value) {
|
||||
$scope.$emit('navRouter.leftButtonsChanged', $scope.leftButtons);
|
||||
});
|
||||
|
||||
$scope.$watch('rightButtons', function(val) {
|
||||
$scope.$emit('navRouter.rightButtonsChanged', $scope.rightButtons);
|
||||
});
|
||||
|
||||
/*
|
||||
$scope.$watch('hideBackButton', function(value) {
|
||||
if(value === true) {
|
||||
navCtrl.hideBackButton();
|
||||
} else {
|
||||
navCtrl.showBackButton();
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
// watch for changes in the title
|
||||
$scope.$watch('title', function(value) {
|
||||
$scope.$emit('navRouter.titleChanged', {
|
||||
title: value,
|
||||
animate: $scope.animate
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('navBack', ['$window', '$rootScope', 'Gesture', function($window, $rootScope, Gesture) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
var goBack = function(e) {
|
||||
// Only trigger back if the stack is greater than zero
|
||||
if($rootScope.stackCursorPosition > 0) {
|
||||
$window.history.back();
|
||||
|
||||
// Fallback for bad history supporting devices
|
||||
$scope.$emit('navRouter.goBack');
|
||||
}
|
||||
e.alreadyHandled = true;
|
||||
return false;
|
||||
};
|
||||
$element.bind('click', goBack);
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
})();
|
||||
137
js/ext/angular/src/directive/ionicTabBar.js
vendored
137
js/ext/angular/src/directive/ionicTabBar.js
vendored
@@ -1,4 +1,4 @@
|
||||
angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
angular.module('ionic.ui.tabs', ['ionic.service.view'])
|
||||
|
||||
/**
|
||||
* @description
|
||||
@@ -7,15 +7,19 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
* on a tab bar. Modelled off of UITabBarController.
|
||||
*/
|
||||
|
||||
.directive('tabs', function() {
|
||||
.directive('tabs', [function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: true,
|
||||
transclude: true,
|
||||
controller: ['$scope', '$element', '$animate', function($scope, $element, $animate) {
|
||||
controller: ['$scope', '$element', function($scope, $element) {
|
||||
var _this = this;
|
||||
|
||||
$scope.tabCount = 0;
|
||||
$scope.selectedIndex = -1;
|
||||
$scope.$enableViewRegister = false;
|
||||
|
||||
angular.extend(this, ionic.controllers.TabBarController.prototype);
|
||||
|
||||
|
||||
@@ -35,24 +39,55 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
}
|
||||
});
|
||||
|
||||
this.add = function(controller) {
|
||||
this.addController(controller);
|
||||
this.select(0);
|
||||
this.add = function(tabScope) {
|
||||
tabScope.tabIndex = $scope.tabCount;
|
||||
this.addController(tabScope);
|
||||
if(tabScope.tabIndex === 0) {
|
||||
this.select(0);
|
||||
}
|
||||
$scope.tabCount++;
|
||||
};
|
||||
|
||||
this.select = function(controllerIndex) {
|
||||
$scope.activeAnimation = $scope.animation;
|
||||
_this.selectController(controllerIndex);
|
||||
this.select = function(tabIndex, emitChange) {
|
||||
if(tabIndex !== $scope.selectedIndex) {
|
||||
|
||||
$scope.selectedIndex = tabIndex;
|
||||
$scope.activeAnimation = $scope.animation;
|
||||
_this.selectController(tabIndex);
|
||||
|
||||
var viewData = {
|
||||
type: 'tab',
|
||||
typeIndex: tabIndex
|
||||
};
|
||||
|
||||
for(var x=0; x<this.controllers.length; x++) {
|
||||
if(tabIndex === this.controllers[x].tabIndex) {
|
||||
viewData.title = this.controllers[x].title;
|
||||
viewData.historyId = this.controllers[x].$historyId;
|
||||
viewData.url = this.controllers[x].url;
|
||||
viewData.uiSref = this.controllers[x].viewSref;
|
||||
viewData.navViewName = this.controllers[x].navViewName;
|
||||
viewData.hasNavView = this.controllers[x].hasNavView;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(emitChange) {
|
||||
$scope.$emit('viewState.changeHistory', viewData);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.controllers = this.controllers;
|
||||
|
||||
$scope.tabsController = this;
|
||||
|
||||
}],
|
||||
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
|
||||
|
||||
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
|
||||
|
||||
compile: function(element, attr, transclude, tabsCtrl) {
|
||||
return function($scope, $element, $attr) {
|
||||
return function link($scope, $element, $attr) {
|
||||
|
||||
var tabs = $element[0].querySelector('.tabs');
|
||||
|
||||
$scope.tabsType = $attr.tabsType || 'tabs-positive';
|
||||
@@ -83,26 +118,35 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
transclude($scope, function(cloned) {
|
||||
$element.prepend(cloned);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
})
|
||||
}])
|
||||
|
||||
// Generic controller directive
|
||||
.directive('tab', ['$animate', '$parse', function($animate, $parse) {
|
||||
.directive('tab', ['ViewService', '$rootScope', '$animate', '$parse', function(ViewService, $rootScope, $animate, $parse) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^tabs',
|
||||
scope: true,
|
||||
transclude: 'element',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr, tabsCtrl) {
|
||||
|
||||
return function link($scope, $element, $attr, tabsCtrl) {
|
||||
var childScope, childElement;
|
||||
|
||||
ViewService.registerHistory($scope);
|
||||
|
||||
$scope.title = $attr.title;
|
||||
$scope.icon = $attr.icon;
|
||||
$scope.iconOn = $attr.iconOn;
|
||||
$scope.iconOff = $attr.iconOff;
|
||||
$scope.viewSref = $attr.uiSref;
|
||||
$scope.url = $attr.href;
|
||||
if($scope.url && $scope.url.indexOf('#') === 0) {
|
||||
$scope.url = $scope.url.replace('#', '');
|
||||
}
|
||||
|
||||
// Should we hide a back button when this tab is shown
|
||||
$scope.hideBackButton = $scope.$eval($attr.hideBackButton);
|
||||
@@ -115,17 +159,11 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
// tell any parent nav controller to animate
|
||||
$scope.animate = $scope.$eval($attr.animate);
|
||||
|
||||
// Grab whether we should update any parent nav router on tab changes
|
||||
$scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter);
|
||||
if($scope.doesUpdateNavRouter !== false) {
|
||||
$scope.doesUpdateNavRouter = true;
|
||||
}
|
||||
|
||||
var leftButtonsGet = $parse($attr.leftButtons);
|
||||
$scope.$watch(leftButtonsGet, function(value) {
|
||||
$scope.leftButtons = value;
|
||||
if($scope.doesUpdateNavRouter) {
|
||||
$scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
|
||||
$scope.$emit('viewState.leftButtonsChanged', $scope.rightButtons);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -135,7 +173,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
});
|
||||
|
||||
tabsCtrl.add($scope);
|
||||
|
||||
|
||||
$scope.$watch('isVisible', function(value) {
|
||||
if(childElement) {
|
||||
$animate.leave(childElement);
|
||||
@@ -155,23 +193,32 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
|
||||
$animate.enter(clone, $element.parent(), $element);
|
||||
|
||||
if($scope.title) {
|
||||
// Send the title up in case we are inside of a nav controller
|
||||
if($scope.doesUpdateNavRouter) {
|
||||
$scope.$emit('navRouter.pageShown', {
|
||||
title: $scope.title,
|
||||
rightButtons: $scope.rightButtons,
|
||||
leftButtons: $scope.leftButtons,
|
||||
hideBackButton: $scope.hideBackButton,
|
||||
animate: $scope.animateNav
|
||||
});
|
||||
}
|
||||
//$scope.$emit('navRouter.titleChanged', $scope.title);
|
||||
}
|
||||
$scope.$broadcast('tab.shown');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// check if it has a ui-view in it
|
||||
transclude($scope.$new(), function(clone) {
|
||||
var navViewEle = clone[0].getElementsByTagName("nav-view");
|
||||
$scope.hasNavView = (navViewEle.length > 0);
|
||||
if($scope.hasNavView) {
|
||||
// this tab has a ui-view
|
||||
$scope.navViewName = navViewEle[0].getAttribute('name');
|
||||
if( ViewService.isCurrentStateNavView( $scope.navViewName ) ) {
|
||||
// this tab's ui-view is the current one, go to it!
|
||||
tabsCtrl.select($scope.tabIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$rootScope.$on('$stateChangeSuccess', function(value){
|
||||
if( ViewService.isCurrentStateNavView($scope.navViewName) &&
|
||||
$scope.tabIndex !== tabsCtrl.selectedIndex) {
|
||||
tabsCtrl.select($scope.tabIndex);
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
@@ -186,7 +233,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
replace: true,
|
||||
scope: true,
|
||||
template: '<div class="tabs">' +
|
||||
'<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' +
|
||||
'<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
|
||||
'</div>',
|
||||
link: function($scope, $element, $attr, tabsCtrl) {
|
||||
$element.addClass($scope.tabsType);
|
||||
@@ -195,13 +242,13 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
};
|
||||
})
|
||||
|
||||
.directive('tabControllerItem', function() {
|
||||
.directive('tabControllerItem', ['$window', function($window) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^tabs',
|
||||
scope: {
|
||||
title: '@',
|
||||
iconTitle: '@',
|
||||
icon: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
@@ -213,26 +260,26 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
if(attrs.icon) {
|
||||
scope.iconOn = scope.iconOff = attrs.icon;
|
||||
}
|
||||
scope.selectTab = function(index) {
|
||||
tabsCtrl.select(scope.index);
|
||||
|
||||
scope.selectTab = function() {
|
||||
tabsCtrl.select(scope.index, true);
|
||||
};
|
||||
},
|
||||
template:
|
||||
'<a ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +
|
||||
'<i class="{{icon}}" ng-if="icon"></i>' +
|
||||
'<i class="icon {{icon}}" ng-if="icon"></i>' +
|
||||
'<i class="{{iconOn}}" ng-if="active"></i>' +
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{iconTitle}}' +
|
||||
'</a>'
|
||||
};
|
||||
})
|
||||
}])
|
||||
|
||||
.directive('tabBar', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div class="tabs tabs-primary" ng-transclude>' +
|
||||
'</div>'
|
||||
template: '<div class="tabs tabs-primary" ng-transclude></div>'
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
339
js/ext/angular/src/directive/ionicViewState.js
vendored
Normal file
339
js/ext/angular/src/directive/ionicViewState.js
vendored
Normal file
@@ -0,0 +1,339 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @description
|
||||
* The NavController is a navigation stack View Controller modelled off of
|
||||
* UINavigationController from Cocoa Touch. With the Nav Controller, you can
|
||||
* "push" new "pages" on to the navigation stack, and then pop them off to go
|
||||
* back. The NavController controls a navigation bar with a back button and title
|
||||
* which updates as the pages switch.
|
||||
*
|
||||
* The NavController makes sure to not recycle scopes of old pages
|
||||
* so that a pop will still show the same state that the user left.
|
||||
*
|
||||
* However, once a page is popped, its scope is destroyed and will have to be
|
||||
* recreated then next time it is pushed.
|
||||
*
|
||||
*/
|
||||
|
||||
angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gesture'])
|
||||
|
||||
/**
|
||||
* Our Nav Bar directive which updates as the controller state changes.
|
||||
*/
|
||||
.directive('navBar', ['ViewService', '$rootScope', '$animate', '$compile',
|
||||
function( ViewService, $rootScope, $animate, $compile) {
|
||||
|
||||
/**
|
||||
* Perform an animation between one tab bar state and the next.
|
||||
* Right now this just animates the titles.
|
||||
*/
|
||||
var animate = function($scope, $element, oldTitle, data, cb) {
|
||||
var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
|
||||
|
||||
var newTitle = data.title;
|
||||
if(!oldTitle || oldTitle === newTitle) {
|
||||
cb();
|
||||
return;
|
||||
}
|
||||
|
||||
// Clone the old title and add a new one so we can show two animating in and out
|
||||
// add ng-leave and ng-enter during creation to prevent flickering when they are swapped during animation
|
||||
title = angular.element(titles[0]);
|
||||
oTitle = $compile('<h1 class="title" ng-bind="oldTitle"></h1>')($scope);
|
||||
title.replaceWith(oTitle);
|
||||
nTitle = $compile('<h1 class="title" ng-bind="currentTitle"></h1>')($scope);
|
||||
|
||||
var insert = $element[0].firstElementChild || null;
|
||||
|
||||
// Insert the new title
|
||||
$animate.enter(nTitle, $element, insert && angular.element(insert), function() {
|
||||
cb();
|
||||
});
|
||||
|
||||
// Remove the old title
|
||||
$animate.leave(angular.element(oTitle), function() {
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
type: '@',
|
||||
backButtonType: '@',
|
||||
backButtonLabel: '@',
|
||||
backButtonIcon: '@',
|
||||
alignTitle: '@'
|
||||
},
|
||||
template: '<header class="bar bar-header nav-bar">'+//' ng-class="{invisible: !navController.navBar.isVisible}">' +
|
||||
'<div class="buttons"> ' +
|
||||
'<button view-back class="button" ng-show="enableBackButton && showBackButton" ng-class="backButtonClass" ng-bind-html="backButtonLabel"></button>' +
|
||||
'<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" class="button no-animation {{button.type}}" ng-bind-html="button.content"></button>' +
|
||||
'</div>' +
|
||||
'<h1 class="title" ng-bind="currentTitle"></h1>' +
|
||||
'<div class="buttons" ng-if="rightButtons.length"> ' +
|
||||
'<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" class="button no-animation {{button.type}}" ng-bind-html="button.content"></button>' +
|
||||
'</div>' +
|
||||
'</header>',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
|
||||
// Create the back button content and show/hide it based on scope settings
|
||||
$scope.enableBackButton = true;
|
||||
$scope.backButtonClass = $attr.backButtonType;
|
||||
if($attr.backButtonIcon) {
|
||||
$scope.backButtonClass += ' icon ' + $attr.backButtonIcon;
|
||||
}
|
||||
|
||||
// Listen for changes in the stack cursor position to indicate whether a back
|
||||
// button should be shown (this can still be disabled by the $scope.enableBackButton
|
||||
$rootScope.$watch('$viewHistory.backView', function(backView) {
|
||||
if(backView) {
|
||||
var currentView = ViewService.getCurrentView();
|
||||
if(currentView) {
|
||||
if(backView.historyId === currentView.historyId) {
|
||||
$scope.showBackButton = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
$scope.showBackButton = false;
|
||||
});
|
||||
|
||||
// Store a reference to our nav controller
|
||||
$scope.navController = navCtrl;
|
||||
|
||||
// Initialize our header bar view which will handle resizing and aligning our title labels
|
||||
var hb = new ionic.views.HeaderBar({
|
||||
el: $element[0],
|
||||
alignTitle: $scope.alignTitle || 'center'
|
||||
});
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
// Add the type of header bar class to this element
|
||||
$element.addClass($scope.type);
|
||||
|
||||
var updateHeaderData = function(data) {
|
||||
var oldTitle = $scope.currentTitle;
|
||||
$scope.oldTitle = oldTitle;
|
||||
|
||||
if(typeof data.title !== 'undefined') {
|
||||
$scope.currentTitle = data.title;
|
||||
}
|
||||
|
||||
$scope.leftButtons = data.leftButtons;
|
||||
$scope.rightButtons = data.rightButtons;
|
||||
|
||||
if(typeof data.hideBackButton !== 'undefined') {
|
||||
$scope.enableBackButton = data.hideBackButton !== true;
|
||||
}
|
||||
|
||||
if(data.animate !== false && $attr.animation && data.title && data.navDirection) {
|
||||
|
||||
$element[0].classList.add($attr.animation);
|
||||
if(data.navDirection === 'back') {
|
||||
$element[0].classList.add('reverse');
|
||||
} else {
|
||||
$element[0].classList.remove('reverse');
|
||||
}
|
||||
|
||||
animate($scope, $element, oldTitle, data, function() {
|
||||
hb.align();
|
||||
});
|
||||
} else {
|
||||
hb.align();
|
||||
}
|
||||
};
|
||||
|
||||
$rootScope.$on('viewState.viewEnter', function(e, data) {
|
||||
updateHeaderData(data);
|
||||
});
|
||||
|
||||
// If a nav page changes the left or right buttons, update our scope vars
|
||||
$scope.$parent.$on('viewState.leftButtonsChanged', function(e, data) {
|
||||
$scope.leftButtons = data;
|
||||
});
|
||||
$scope.$parent.$on('viewState.rightButtonsChanged', function(e, data) {
|
||||
$scope.rightButtons = data;
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
|
||||
.directive('view', ['ViewService', '$rootScope', '$animate',
|
||||
function( ViewService, $rootScope, $animate) {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
priority: 1000,
|
||||
scope: {
|
||||
leftButtons: '=',
|
||||
rightButtons: '=',
|
||||
title: '=',
|
||||
icon: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
type: '@',
|
||||
alignTitle: '@',
|
||||
hideBackButton: '@',
|
||||
hideNavBar: '@',
|
||||
animation: '@'
|
||||
},
|
||||
|
||||
compile: function(tElement, tAttrs, transclude) {
|
||||
tElement.addClass('pane');
|
||||
tElement[0].removeAttribute('title');
|
||||
|
||||
return function link($scope, $element, $attr) {
|
||||
// Should we hide a back button when this tab is shown
|
||||
$scope.hideBackButton = $scope.$eval($scope.hideBackButton);
|
||||
|
||||
$scope.hideNavBar = $scope.$eval($scope.hideNavBar);
|
||||
|
||||
if($scope.hideBackButton === true) {
|
||||
$scope.$emit('viewState.hideBackButton');
|
||||
} else {
|
||||
$scope.$emit('viewState.showBackButton');
|
||||
}
|
||||
|
||||
// watch for changes in the left buttons
|
||||
$scope.$watch('leftButtons', function(value) {
|
||||
$scope.$emit('viewState.leftButtonsChanged', $scope.leftButtons);
|
||||
});
|
||||
|
||||
$scope.$watch('rightButtons', function(val) {
|
||||
$scope.$emit('viewState.rightButtonsChanged', $scope.rightButtons);
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
|
||||
.directive('viewBack', ['ViewService', function(ViewService) {
|
||||
var goBack = function(e) {
|
||||
var backView = ViewService.getBackView();
|
||||
backView && backView.go();
|
||||
e.alreadyHandled = true;
|
||||
return false;
|
||||
};
|
||||
|
||||
return {
|
||||
restrict: 'AC',
|
||||
link: function($scope, $element) {
|
||||
$element.bind('click', goBack);
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
|
||||
.directive('navView', ['ViewService', '$state', '$anchorScroll', '$compile', '$controller', '$animate',
|
||||
function( ViewService, $state, $anchorScroll, $compile, $controller, $animate) {
|
||||
|
||||
var viewIsUpdating = false;
|
||||
var animation;
|
||||
|
||||
var directive = {
|
||||
restrict: 'E',
|
||||
terminal: true,
|
||||
priority: 2000,
|
||||
transclude: true,
|
||||
|
||||
link: function(scope, $element, attr, ctrl, $transclude) {
|
||||
var currentElement,
|
||||
autoScrollExp = attr.autoscroll,
|
||||
onloadExp = attr.onload || '',
|
||||
viewLocals,
|
||||
viewScope,
|
||||
name = attr[directive.name] || attr.name || '',
|
||||
parent = $element.parent().inheritedData('$uiView');
|
||||
|
||||
if (name.indexOf('@') < 0) name = name + '@' + (parent ? parent.state.name : '');
|
||||
var view = { name: name, state: null, animation: null };
|
||||
$element.data('$uiView', view);
|
||||
|
||||
var climbElement = $element[0];
|
||||
while(!animation && climbElement) {
|
||||
animation = climbElement.getAttribute('animation');
|
||||
climbElement = climbElement.parentElement;
|
||||
}
|
||||
|
||||
var eventHook = function() {
|
||||
if (viewIsUpdating) return;
|
||||
viewIsUpdating = true;
|
||||
|
||||
try { update(true); } catch (e) {
|
||||
viewIsUpdating = false;
|
||||
throw e;
|
||||
}
|
||||
viewIsUpdating = false;
|
||||
};
|
||||
|
||||
scope.$on('$stateChangeSuccess', eventHook);
|
||||
scope.$on('$viewContentLoading', eventHook);
|
||||
update(false);
|
||||
|
||||
function update(doAnimation) {
|
||||
var locals = $state.$current && $state.$current.locals[name],
|
||||
template = (locals && locals.$template ? locals.$template.trim() : null);
|
||||
|
||||
if (locals === viewLocals) return; // nothing to do here, go about your business
|
||||
|
||||
var transitionOptions = {
|
||||
parentElement: $element,
|
||||
doAnimation: doAnimation,
|
||||
leavingScope: viewScope,
|
||||
leavingElement: currentElement,
|
||||
navDirection: null
|
||||
};
|
||||
|
||||
if (template) {
|
||||
currentElement = angular.element(template);
|
||||
|
||||
var registerData = {};
|
||||
if(currentElement[0].tagName !== 'TABS') {
|
||||
// the tabs directive shouldn't register in the view history (its tab will)
|
||||
registerData = ViewService.register(scope);
|
||||
transitionOptions.navDirection = registerData.navDirection;
|
||||
}
|
||||
|
||||
viewLocals = locals;
|
||||
view.state = locals.$$state;
|
||||
|
||||
var link = $compile(currentElement),
|
||||
current = $state.current;
|
||||
|
||||
viewScope = current.scope = scope.$new();
|
||||
|
||||
if (locals.$$controller) {
|
||||
locals.$scope = viewScope;
|
||||
var controller = $controller(locals.$$controller, locals);
|
||||
if (current.controllerAs) {
|
||||
viewScope[current.controllerAs] = controller;
|
||||
}
|
||||
currentElement.data('$ngControllerController', controller);
|
||||
currentElement.children().data('$ngControllerController', controller);
|
||||
}
|
||||
|
||||
link(viewScope);
|
||||
|
||||
viewScope.$emit('$viewContentLoaded');
|
||||
viewScope.$eval(onloadExp);
|
||||
viewScope.animation = animation;
|
||||
|
||||
transitionOptions.enteringScope = viewScope.$$childHead;
|
||||
transitionOptions.enteringElement = currentElement;
|
||||
}
|
||||
|
||||
ViewService.transition(transitionOptions);
|
||||
}
|
||||
}
|
||||
};
|
||||
return directive;
|
||||
}]);
|
||||
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user