javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

angular-ui router

Browse Source
This commit is contained in:
Adam Bradley
2014-01-09 11:12:39 -06:00
parent c0cee27747 cd65a8dc7b
commit ead7224a1e
62 changed files with 4790 additions and 1487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
js/ext/angular/src/directive/ionicTabBar.js vendored
View File

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