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

feat(ionic): prefix all directives with ion-

Browse Source 
BREAKING CHANGE: All directives are now prefixed with `ion-`.

For any directive you use, add the ionic prefix.

For example, change this HTML:

```html
<tabs>
  <tab title="home" href="/tab/home">
    <content>Hello!</content>
  </tab>
</tabs>
```

To this HTML:

```
<ion-tabs>
  <ion-tab title="home" href="/tab/home">
    <ion-content>Hello!</ion-content>
  </ion-tab>
</ion-tabs>
```
This commit is contained in:
Andy Joslin
2014-02-18 16:13:00 -05:00
parent ec8862a7cc
commit 2c39a21498
58 changed files with 550 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/ext/angular/src/directive/ionicActionSheet.js vendored
View File

@@ -3,7 +3,7 @@
angular.module('ionic.ui.actionSheet', [])
.directive('actionSheet', ['$document', function($document) {
.directive('ionActionSheet', ['$document', function($document) {
return {
restrict: 'E',
scope: true,

10
js/ext/angular/src/directive/ionicBar.js vendored
View File

@@ -13,19 +13,19 @@ angular.module('ionic.ui.header', ['ngAnimate'])
};
}])
.directive('headerBar', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
.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)" bind-html-unsafe="button.content">\
<button ng-repeat="button in leftButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ion-bind-html-unsafe="button.content">\
</button>\
</div>\
<h1 class="title" bind-html-unsafe="title"></h1>\
<h1 class="title" ion-bind-html-unsafe="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)" bind-html-unsafe="button.content">\
<button ng-repeat="button in rightButtons" class="button no-animation" ng-class="button.type" ng-click="button.tap($event, $index)" ion-bind-html-unsafe="button.content">\
</button>\
</div>\
</header>',
@@ -66,7 +66,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
};
}])
.directive('footerBar', function() {
.directive('ionFooterBar', function() {
return {
restrict: 'E',
replace: true,

6
js/ext/angular/src/directive/ionicBindHtml.js vendored
View File

@@ -1,8 +1,8 @@
angular.module('ionic.ui.bindHtml', [])
.directive('bindHtmlUnsafe', function () {
.directive('ionBindHtmlUnsafe', function () {
return function (scope, element, attr) {
element.addClass('ng-binding').data('$binding', attr.bindHtmlUnsafe);
scope.$watch(attr.bindHtmlUnsafe, function(value) {
element.addClass('ng-binding').data('$binding', attr.ionBindHtmlUnsafe);
scope.$watch(attr.ionBindHtmlUnsafe, function(value) {
element.html(value || '');
});
};

2
js/ext/angular/src/directive/ionicCheckbox.js vendored
View File

@@ -4,7 +4,7 @@
angular.module('ionic.ui.checkbox', [])
.directive('checkbox', function() {
.directive('ionCheckbox', function() {
return {
restrict: 'E',
replace: true,

16
js/ext/angular/src/directive/ionicContent.js vendored
View File

@@ -7,7 +7,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
* Panel is a simple 100% width and height, fixed panel. It's meant for content to be
* added to it, or animated around.
*/
.directive('pane', function() {
.directive('ionPane', function() {
return {
restrict: 'E',
link: function(scope, element, attr) {
@@ -18,13 +18,13 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
// The content directive is a core scrollable content area
// that is part of many View hierarchies
.directive('content', ['$parse', '$timeout', '$ionicScrollDelegate', '$controller', function($parse, $timeout, $ionicScrollDelegate, $controller) {
.directive('ionContent', ['$parse', '$timeout', '$ionicScrollDelegate', '$controller', function($parse, $timeout, $ionicScrollDelegate, $controller) {
return {
restrict: 'E',
replace: true,
template: '<div class="scroll-content"><div class="scroll" ng-transclude></div></div>',
transclude: true,
require: '^?navView',
require: '^?ionNavView',
scope: {
onRefresh: '&',
onRefreshOpening: '&',
@@ -53,7 +53,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
if(attr.padding == "true") { element.find('div').addClass('padding'); }
return {
//Prelink <content> so it can compile before other directives compile.
//Prelink <ion-content> so it can compile before other directives compile.
//Then other directives can require ionicScrollCtrl
pre: prelink
};
@@ -158,17 +158,17 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
};
}])
.directive('refresher', function() {
.directive('ionRefresher', function() {
return {
restrict: 'E',
replace: true,
require: ['^?content', '^?list'],
require: ['^?ionContent', '^?ionList'],
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
scope: true
};
})
.directive('scrollRefresher', function() {
.directive('ionScrollRefresher', function() {
return {
restrict: 'E',
replace: true,
@@ -177,7 +177,7 @@ angular.module('ionic.ui.content', ['ionic.ui.service', 'ionic.ui.scroll'])
};
})
.directive('infiniteScroll', function() {
.directive('ionInfiniteScroll', function() {
return {
restrict: 'E',
replace: false,

10
js/ext/angular/src/directive/ionicList.js vendored
View File

@@ -3,10 +3,10 @@
angular.module('ionic.ui.list', ['ngAnimate'])
.directive('item', ['$timeout', '$parse', function($timeout, $parse) {
.directive('ionItem', ['$timeout', '$parse', function($timeout, $parse) {
return {
restrict: 'E',
require: '?^list',
require: '?^ionList',
replace: true,
transclude: true,
@@ -24,14 +24,14 @@ angular.module('ionic.ui.list', ['ngAnimate'])
template: '<div class="item item-complex">\
<div class="item-edit" ng-if="deleteClick !== undefined">\
<button class="button button-icon icon" ng-class="deleteIconClass" ng-click="deleteClick()" stop-event="click"></button>\
<button class="button button-icon icon" ng-class="deleteIconClass" ng-click="deleteClick()" ion-stop-event="click"></button>\
</div>\
<a class="item-content" ng-href="{{ href }}" ng-transclude></a>\
<div class="item-drag" ng-if="reorderIconClass !== undefined">\
<button data-ionic-action="reorder" class="button button-icon icon" ng-class="reorderIconClass"></button>\
</div>\
<div class="item-options" ng-if="itemOptionButtons">\
<button ng-click="b.onTap(item, b)" stop-event="click" class="button" ng-class="b.type" ng-repeat="b in itemOptionButtons" ng-bind="b.text"></button>\
<button ng-click="b.onTap(item, b)" ion-stop-event="click" class="button" ng-class="b.type" ng-repeat="b in itemOptionButtons" ng-bind="b.text"></button>\
</div>\
</div>',
@@ -95,7 +95,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
};
}])
.directive('list', ['$timeout', function($timeout) {
.directive('ionList', ['$timeout', function($timeout) {
return {
restrict: 'E',
replace: true,

2
js/ext/angular/src/directive/ionicLoading.js vendored
View File

@@ -3,7 +3,7 @@
angular.module('ionic.ui.loading', [])
.directive('loading', function() {
.directive('ionLoading', function() {
return {
restrict: 'E',
replace: true,

8
js/ext/angular/src/directive/ionicRadio.js vendored
View File

@@ -5,7 +5,7 @@ angular.module('ionic.ui.radio', [])
// The radio button is a radio powered element with only
// one possible selection in a set of options.
.directive('radio', function() {
.directive('ionRadio', function() {
return {
restrict: 'E',
replace: true,
@@ -33,7 +33,7 @@ angular.module('ionic.ui.radio', [])
// The radio button is a radio powered element with only
// one possible selection in a set of options.
.directive('radioButtons', function() {
.directive('ionRadioButtons', function() {
return {
restrict: 'E',
replace: true,
@@ -76,10 +76,10 @@ angular.module('ionic.ui.radio', [])
};
})
.directive('buttonRadio', function() {
.directive('ionButtonRadio', function() {
return {
restrict: 'CA',
require: ['?^ngModel', '?^radioButtons'],
require: ['?^ngModel', '?^ionRadioButtons'],
link: function($scope, $element, $attr, ctrls) {
var ngModel = ctrls[0];
var radioButtons = ctrls[1];

4
js/ext/angular/src/directive/ionicScroll.js vendored
View File

@@ -3,7 +3,7 @@
angular.module('ionic.ui.scroll', [])
.directive('scroll', ['$parse', '$timeout', '$controller', function($parse, $timeout, $controller) {
.directive('ionScroll', ['$parse', '$timeout', '$controller', function($parse, $timeout, $controller) {
return {
restrict: 'E',
replace: true,
@@ -25,7 +25,7 @@ angular.module('ionic.ui.scroll', [])
compile: function(element, attr, transclude) {
return {
//Prelink <scroll> so it can compile before other directives compile.
//Prelink <ion-scroll> so it can compile before other directives compile.
//Then other directives can require ionicScrollCtrl
pre: prelink
};

10
js/ext/angular/src/directive/ionicSideMenu.js vendored
View File

@@ -20,7 +20,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
$ionicViewService.disableRegisterByTagName('side-menus');
}])
.directive('sideMenus', function() {
.directive('ionSideMenus', function() {
return {
restrict: 'ECA',
controller: ['$scope', '$attrs', function($scope, $attrs) {
@@ -43,10 +43,10 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
};
})
.directive('sideMenuContent', ['$timeout', '$ionicGesture', function($timeout, $ionicGesture) {
.directive('ionSideMenuContent', ['$timeout', '$ionicGesture', function($timeout, $ionicGesture) {
return {
restrict: 'AC',
require: '^sideMenus',
require: '^ionSideMenus',
scope: true,
compile: function(element, attr, transclude) {
return function($scope, $element, $attr, sideMenuCtrl) {
@@ -142,10 +142,10 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
}])
.directive('sideMenu', function() {
.directive('ionSideMenu', function() {
return {
restrict: 'E',
require: '^sideMenus',
require: '^ionSideMenus',
replace: true,
transclude: true,
scope: true,

12
js/ext/angular/src/directive/ionicSlideBox.js vendored
View File

@@ -13,7 +13,7 @@ angular.module('ionic.ui.slideBox', [])
* The internal controller for the slide box controller.
*/
.directive('slideBox', ['$timeout', '$compile', '$ionicSlideBoxDelegate', function($timeout, $compile, $ionicSlideBoxDelegate) {
.directive('ionSlideBox', ['$timeout', '$compile', '$ionicSlideBoxDelegate', function($timeout, $compile, $ionicSlideBoxDelegate) {
return {
restrict: 'E',
replace: true,
@@ -93,7 +93,7 @@ angular.module('ionic.ui.slideBox', [])
// If the pager should show, append it to the slide box
if($scope.$eval($scope.showPager) !== false) {
var childScope = $scope.$new();
var pager = angular.element('<pager></pager>');
var pager = angular.element('<ion-pager></ion-pager>');
$element.append(pager);
$compile(pager)(childScope);
}
@@ -101,10 +101,10 @@ angular.module('ionic.ui.slideBox', [])
};
}])
.directive('slide', function() {
.directive('ionSlide', function() {
return {
restrict: 'E',
require: '^slideBox',
require: '^ionSlideBox',
compile: function(element, attr) {
element.addClass('slider-slide');
return function($scope, $element, $attr) {};
@@ -112,11 +112,11 @@ angular.module('ionic.ui.slideBox', [])
};
})
.directive('pager', function() {
.directive('ionPager', function() {
return {
restrict: 'E',
replace: true,
require: '^slideBox',
require: '^ionSlideBox',
template: '<div class="slider-pager"><span class="slider-pager-page" ng-repeat="slide in numSlides() track by $index" ng-class="{active: $index == currentSlide}"><i class="icon ion-record"></i></span></div>',
link: function($scope, $element, $attr, slideBox) {
var selectPage = function(index) {

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

@@ -9,7 +9,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
.run(['$ionicViewService', function($ionicViewService) {
// set that the tabs directive should not animate when transitioning
// to it. Instead, the children <tab> directives would animate
// to it. Instead, the children <ion-tab> directives would animate
$ionicViewService.disableRegisterByTagName('tabs');
}])
@@ -94,14 +94,14 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
}])
.directive('tabs', ['$ionicViewService', function($ionicViewService) {
.directive('ionTabs', ['$ionicViewService', function($ionicViewService) {
return {
restrict: 'E',
replace: true,
scope: true,
transclude: true,
controller: '$ionicTabs',
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
template: '<div class="view"><ion-tab-controller-bar></ion-tab-controller-bar></div>',
compile: function(element, attr, transclude, tabsCtrl) {
return function link($scope, $element, $attr) {
@@ -141,10 +141,10 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
}])
// Generic controller directive
.directive('tab', ['$ionicViewService', '$rootScope', '$parse', '$interpolate', function($ionicViewService, $rootScope, $parse, $interpolate) {
.directive('ionTab', ['$ionicViewService', '$rootScope', '$parse', '$interpolate', function($ionicViewService, $rootScope, $parse, $interpolate) {
return {
restrict: 'E',
require: '^tabs',
require: '^ionTabs',
scope: true,
transclude: 'element',
compile: function(element, attr, transclude) {
@@ -229,7 +229,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
// on link, check if it has a nav-view in it
transclude($scope.$new(), function(clone) {
var navViewEle = clone[0].getElementsByTagName("nav-view");
var navViewEle = clone[0].getElementsByTagName("ion-nav-view");
$scope.hasNavView = (navViewEle.length > 0);
if($scope.hasNavView) {
// this tab has a ui-view
@@ -256,15 +256,15 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
}])
.directive('tabControllerBar', function() {
.directive('ionTabControllerBar', function() {
return {
restrict: 'E',
require: '^tabs',
require: '^ionTabs',
transclude: true,
replace: true,
scope: true,
template: '<div class="tabs">' +
'<tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="c.badge" badge-style="c.badgeStyle" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
'<ion-tab-controller-item icon-title="{{c.title}}" icon="{{c.icon}}" icon-on="{{c.iconOn}}" icon-off="{{c.iconOff}}" badge="c.badge" badge-style="c.badgeStyle" active="c.isVisible" index="$index" ng-repeat="c in controllers"></ion-tab-controller-item>' +
'</div>',
link: function($scope, $element, $attr, tabsCtrl) {
$element.addClass($scope.tabsType);
@@ -273,11 +273,11 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
};
})
.directive('tabControllerItem', ['$window', function($window) {
.directive('ionTabControllerItem', ['$window', function($window) {
return {
restrict: 'E',
replace: true,
require: '^tabs',
require: '^ionTabs',
scope: {
iconTitle: '@',
icon: '@',
@@ -304,7 +304,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
'<i class="icon {{icon}}" ng-if="icon"></i>' +
'<i class="{{iconOn}}" ng-if="active"></i>' +
'<i class="{{iconOff}}" ng-if="!active"></i>' +
'<span bind-html-unsafe="iconTitle"></span>' +
'<span ion-bind-html-unsafe="iconTitle"></span>' +
'</a>'
};
}]);

2
js/ext/angular/src/directive/ionicToggle.js vendored
View File

@@ -5,7 +5,7 @@ angular.module('ionic.ui.toggle', [])
// The Toggle directive is a toggle switch that can be tapped to change
// its value
.directive('toggle', function() {
.directive('ionToggle', function() {
return {
restrict: 'E',

4
js/ext/angular/src/directive/ionicTouch.js vendored
View File

@@ -47,14 +47,14 @@ angular.module('ionic.ui.touch', [])
}])
.directive('stopEvent', function () {
.directive('ionStopEvent', function () {
function stopEvent(e) {
e.stopPropagation();
}
return {
restrict: 'A',
link: function (scope, element, attr) {
element.bind(attr.stopEvent, stopEvent);
element.bind(attr.ionStopEvent, stopEvent);
}
};
});

28
js/ext/angular/src/directive/ionicViewState.js vendored
View File

@@ -22,7 +22,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
/**
* Our Nav Bar directive which updates as the controller state changes.
*/
.directive('navBar', ['$ionicViewService', '$rootScope', '$animate', '$compile',
.directive('ionNavBar', ['$ionicViewService', '$rootScope', '$animate', '$compile',
function( $ionicViewService, $rootScope, $animate, $compile) {
return {
@@ -40,23 +40,21 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
template:
'<header class="bar bar-header nav-bar {{type}} {{isReverse ? \'reverse\' : \'\'}} ' +
'{{isInvisible ? \'invisible\' : \'\'}} {{animateEnabled ? animation : \'\'}}">' +
'<nav-back-button ng-if="backButtonEnabled && (backType || backLabel || backIcon)" ' +
'type="backType" label="backLabel" icon="backIcon" class="invisible" async-visible>' +
'</nav-back-button>' +
'<ion-nav-back-button ng-if="backButtonEnabled && (backType || backLabel || backIcon)" ' +
'type="backType" label="backLabel" icon="backIcon" class="invisible" ion-async-visible>' +
'</ion-nav-back-button>' +
'<div class="buttons left-buttons"> ' +
'<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" ' +
'class="button no-animation {{button.type}}" ' +
'bind-html-unsafe="button.content">' +
'class="button no-animation {{button.type}}" ion-bind-html-unsafe="button.content">' +
'</button>' +
'</div>' +
//ng-repeat makes it easy to add new / remove old and have proper enter/leave anims
'<h1 ng-repeat="title in titles" bind-html-unsafe="title" class="title invisible" async-visible nav-bar-title></h1>' +
'<h1 ng-repeat="title in titles" ion-bind-html-unsafe="title" class="title invisible" ion-async-visible ion-nav-bar-title></h1>' +
'<div class="buttons right-buttons" ng-if="rightButtons.length"> ' +
'<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" '+
'class="button no-animation {{button.type}}" ' +
'bind-html-unsafe="button.content">' +
'class="button no-animation {{button.type}}" ion-bind-html-unsafe="button.content">' +
'</button>' +
'</div>' +
'</header>',
@@ -130,10 +128,10 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
};
}])
.directive('navBarTitle', function() {
.directive('ionNavBarTitle', function() {
return {
restrict: 'A',
require: '^navBar',
require: '^ionNavBar',
link: function($scope, $element, $attr, navBarCtrl) {
$scope.headerBarView && $scope.headerBarView.align();
$element.on('$animate:close', function() {
@@ -149,7 +147,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
* Fixes flickering in iOS7 and old android.
* Used in title and back button
*/
.directive('asyncVisible', function() {
.directive('ionAsyncVisible', function() {
return function($scope, $element) {
ionic.requestAnimationFrame(function() {
$element[0].classList.remove('invisible');
@@ -157,7 +155,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
};
})
.directive('view', ['$ionicViewService', '$rootScope', '$animate',
.directive('ionView', ['$ionicViewService', '$rootScope', '$animate',
function( $ionicViewService, $rootScope, $animate) {
return {
restrict: 'EA',
@@ -215,7 +213,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
}])
.directive('navBackButton', ['$ionicViewService', '$rootScope',
.directive('ionNavBackButton', ['$ionicViewService', '$rootScope',
function($ionicViewService, $rootScope) {
function goBack(e) {
@@ -246,7 +244,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
}])
.directive('navView', ['$ionicViewService', '$state', '$compile', '$controller', '$animate',
.directive('ionNavView', ['$ionicViewService', '$state', '$compile', '$controller', '$animate',
function( $ionicViewService, $state, $compile, $controller, $animate) {
// IONIC's fork of Angular UI Router, v0.2.7
// the navView handles registering views in the history, which animation to use, and which

2
js/ext/angular/src/directive/ionicVirtRepeat.js vendored
View File

@@ -3,7 +3,7 @@
angular.module('ionic.ui.virtRepeat', [])
.directive('virtRepeat', function() {
.directive('ionVirtRepeat', function() {
return {
require: ['?ngModel', '^virtualList'],
transclude: 'element',

2
js/ext/angular/src/directive/ionicVirtualRepeat.js vendored
View File

@@ -130,7 +130,7 @@ angular.module('ionic.ui.virtualRepeat', [])
* scrolling to only render items that are showing or will be showing
* if a scroll is made.
*/
.directive('virtualRepeat', ['$log', function($log) {
.directive('ionVirtualRepeat', ['$log', function($log) {
return {
require: ['?ngModel, ^virtualList'],
transclude: 'element',

2
js/ext/angular/src/service/ionicActionSheet.js vendored
View File

@@ -20,7 +20,7 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
// Compile the template
var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
var element = $compile('<ion-action-sheet buttons="buttons"></ion-action-sheet>')(scope);
// Grab the sheet element for animation
var sheetEl = angular.element(element[0].querySelector('.action-sheet-wrapper'));

2
js/ext/angular/src/service/ionicLoading.js vendored
View File

@@ -31,7 +31,7 @@ angular.module('ionic.service.loading', ['ionic.ui.loading'])
}
// Compile the template
var element = $compile('<loading>' + opts.content + '</loading>')(scope);
var element = $compile('<ion-loading>' + opts.content + '</ion-loading>')(scope);
$document[0].body.appendChild(element[0]);

12
js/ext/angular/src/service/ionicView.js vendored
View File

@@ -129,8 +129,8 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
if(element && !this.isTagNameRegistrable(element)) {
// first check to see if this element can even be registered as a view.
// Certain tags are only containers for views, but are not views themselves.
// For example, the <tabs> directive contains a <tab> and the <tab> is the
// view, but the <tabs> directive itself should not be registered as a view.
// For example, the <ion-tabs> directive contains a <ion-tab> and the <ion-tab> is the
// view, but the <ion-tabs> directive itself should not be registered as a view.
rsp.navAction = 'disabledByTagName';
return rsp;
}
@@ -456,15 +456,15 @@ angular.module('ionic.service.view', ['ui.router', 'ionic.service.platform'])
disableRegisterByTagName: function(tagName) {
// not every element should animate betwee transitions
// For example, the <tabs> directive should not animate when it enters,
// but instead the <tabs> directve would just show, and its children
// <tab> directives would do the animating, but <tabs> itself is not a view
// For example, the <ion-tabs> directive should not animate when it enters,
// but instead the <ion-tabs> directve would just show, and its children
// <ion-tab> directives would do the animating, but <ion-tabs> itself is not a view
$rootScope.$viewHistory.disabledRegistrableTagNames.push(tagName.toUpperCase());
},
isTagNameRegistrable: function(element) {
// check if this element has a tagName (at its root, not recursively)
// that shouldn't be animated, like <tabs> or <side-menu>
// that shouldn't be animated, like <ion-tabs> or <ion-side-menu>
var x, y, disabledTags = $rootScope.$viewHistory.disabledRegistrableTagNames;
for(x=0; x<element.length; x++) {
if(element[x].nodeType !== 1) continue;

4
js/ext/angular/test/actionSheet.html
View File

@@ -16,7 +16,7 @@
<script src="../../../../dist/js/ionic.bundle.js"></script>
</head>
<body ng-controller="ActionCtrl">
<content>
<ion-content>
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
@@ -128,7 +128,7 @@
<button ng-click="show()" class="button">Show</button>
</content>
</ion-content>
<script>
angular.module('actionTest', ['ionic', 'ngAnimate'])

12
js/ext/angular/test/anchorScroll.html
View File

@@ -20,18 +20,18 @@
<h1 class="title">Click the Clock to Get Stuck</h1>
</header>
<content class="has-header">
<ion-content class="has-header">
<list>
<item ng-repeat="item in items"
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
id="foo-{{item.id}}"
href="#/item/{{item.id}}">
Item {{ item.id }}
</item>
</list>
</ion-item>
</ion-list>
</content>
</ion-content>
</div>
<script>

16
js/ext/angular/test/carousel.html
View File

@@ -43,8 +43,8 @@
<body>
<div ng-controller="SlideCtrl">
<slide-box on-slide-changed="slideChanged(index)" does-continue="true">
<slide>
<ion-slide-box on-slide-changed="slideChanged(index)" does-continue="true">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="app_icon.png">
@@ -55,8 +55,8 @@
<p>
But if you are angry, too bad.
</p>
</slide>
<slide>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
@@ -67,14 +67,14 @@
<li>There is no step 3</li>
</ol>
</div>
</slide>
<slide>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p>
Too bad!
</p>
</slide>
</slide-box>
</ion-slide>
</ion-slide-box>
</div>
<script>
angular.module('slideBoxTest', ['ionic'])

14
js/ext/angular/test/clickTests.html
View File

@@ -48,21 +48,21 @@
<div class="list">
<item ng-repeat="item in menuItems" item="item" ng-click="item.actionItem()">ng-click="item.actionItem()"</item>
<ion-item ng-repeat="item in menuItems" ion-item="item" ng-click="item.actionItem()">ng-click="item.actionItem()"</ion-item>
<checkbox>checkbox with no ng-click</checkbox>
<ion-checkbox>checkbox with no ng-click</ion-checkbox>
<toggle ng-click="{{ stringClick }}">Toggle with ng-click="{{ stringClick }]"</toggle>
<ion-toggle ng-click="{{ stringClick }}">Toggle with ng-click="{{ stringClick }]"</ion-toggle>
<radio ng-change="radioChange()"
<ion-radio ng-change="radioChange()"
ng-click="radioClick(radioModel.data)"
ng-model="radioModel.data"
ng-value="'Radio A'">Radio A</radio>
ng-value="'Radio A'">Radio A</ion-radio>
<radio ng-change="radioChange()"
<ion-radio ng-change="radioChange()"
ng-click="radioClick(radioModel.data)"
ng-model="radioModel.data"
ng-value="'Radio B'">Radio B</radio>
ng-value="'Radio B'">Radio B</ion-radio>
</div>

12
js/ext/angular/test/content.html
View File

@@ -54,10 +54,10 @@
</head>
<body ng-controller="ThisCtrl">
<pane>
<header-bar id="header" title="'Title'" type="bar-primary" hides-header></header-bar>
<ion-pane>
<ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
<content id="container"
<ion-content id="container"
start-y="55"
on-scroll="onScroll(event, scrollTop, scrollLeft)"
on-scroll-complete="onScrollComplete(scrollTop, scrollLeft)"
@@ -67,7 +67,7 @@
has-tabs="true"
has-header="true"
>
<refresher></refresher>
<ion-refresher></ion-refresher>
<div id="search-box" class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
@@ -83,7 +83,7 @@
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
</ul>
<input type="text" placeholder="INPUT TEXT">
</content>
</ion-content>
<nav id="tab-bar" class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-game-controller-a"></i>
@@ -107,7 +107,7 @@
</a>
</nav>
</pane>
</ion-pane>
<script>
angular.module('navTest', ['ionic'])

12
js/ext/angular/test/contentClick.html
View File

@@ -49,14 +49,14 @@
</head>
<body>
<tabs>
<tab ng-controller="MyCtrl">
<content>
<ion-tabs>
<ion-tab ng-controller="MyCtrl">
<ion-content>
<button ng-click="add()">add</button>
{{count}}
</content>
</tab>
</tabs>
</ion-content>
</ion-tab>
</ion-tabs>
<script>
angular.module('navTest', ['ionic'])

10
js/ext/angular/test/content_defer.html
View File

@@ -10,10 +10,10 @@
<script src="../../../../dist/js/ionic.bundle.js"></script>
</head>
<body ng-controller="ThisCtrl">
<pane>
<header-bar id="header" title="'Title'" type="bar-primary" hides-header></header-bar>
<ion-pane>
<ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
<content id="container"
<ion-content id="container"
on-scroll="onScroll(event, scrollTop, scrollLeft)"
on-scroll-complete="onScrollComplete(scrollTop, scrollLeft)"
on-refresh="onRefresh()"
@@ -23,7 +23,7 @@
has-header="true"
>
<div ng-repeat="items in items">{{$index}}</div>
</content>
</ion-content>
<nav id="tab-bar" class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-game-controller-a"></i>
@@ -47,7 +47,7 @@
</a>
</nav>
</pane>
</ion-pane>
<script>
angular.module('navTest', ['ionic'])

10
js/ext/angular/test/content_h.html
View File

@@ -49,16 +49,16 @@
</head>
<body ng-controller="ThisCtrl">
<pane>
<header-bar id="header" title="'Title'" type="bar-primary" hides-header></header-bar>
<ion-pane>
<ion-header-bar id="header" title="'Title'" type="bar-primary" hides-header></ion-header-bar>
<content id="container"
<ion-content id="container"
has-scroll-x="true"
has-tabs="true"
has-header="true"
>
<div style="height: 4000px; width: 4000px; background: url('tree_bark.png') repeat"></div>
</content>
</ion-content>
<nav id="tab-bar" class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-game-controller-a"></i>
@@ -82,7 +82,7 @@
</a>
</nav>
</pane>
</ion-pane>
<script>
angular.module('navTest', ['ionic'])

4
js/ext/angular/test/directive/ionicCheckbox.unit.js
View File

@@ -9,13 +9,13 @@ describe('Ionic Checkbox', function() {
}));
it('should set the checkbox name', function() {
el = compile('<checkbox name="myname"></checkbox>')(scope);
el = compile('<ion-checkbox name="myname"></ion-checkbox>')(scope);
var input = el.find('input');
expect(input.attr('name')).toEqual('myname');
});
it('should setup checkbox markup', function() {
el = compile('<checkbox>INNER TEXT</checkbox>')(scope);
el = compile('<ion-checkbox>INNER TEXT</ion-checkbox>')(scope);
expect(el.hasClass('item')).toEqual(true);
expect(el.hasClass('item-checkbox')).toEqual(true);
var label = el.find('label');

20
js/ext/angular/test/directive/ionicContent.unit.js
View File

@@ -12,22 +12,22 @@ describe('Ionic Content directive', function() {
}));
it('Has $ionicScroll controller', function() {
element = compile('<content></content>')(scope);
element = compile('<ion-content></ion-content>')(scope);
expect(element.controller('$ionicScroll').element).toBe(element[0]);
});
it('Has content class', function() {
element = compile('<content></content>')(scope);
element = compile('<ion-content></ion-content>')(scope);
expect(element.hasClass('scroll-content')).toBe(true);
});
it('Has header', function() {
element = compile('<content has-header="true"></content>')(scope);
element = compile('<ion-content has-header="true"></ion-content>')(scope);
expect(element.hasClass('has-header')).toEqual(true);
});
it('should add padding classname', function() {
element = compile('<content padding="true"></content>')(scope);
element = compile('<ion-content padding="true"></ion-content>')(scope);
expect(element.hasClass('scroll-content')).toEqual(true);
expect(element.hasClass('padding')).toEqual(false);
var scrollElement = element.find('.scroll');
@@ -36,7 +36,7 @@ describe('Ionic Content directive', function() {
it('Enables bouncing by default', function() {
ionic.Platform.setPlatform('iPhone');
element = compile('<content has-header="true"></content>')(scope);
element = compile('<ion-content has-header="true"></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -45,7 +45,7 @@ describe('Ionic Content directive', function() {
it('Disables bouncing when has-bouncing = false', function() {
ionic.Platform.setPlatform('iPhone');
element = compile('<content has-header="true" has-bouncing="false"></content>')(scope);
element = compile('<ion-content has-header="true" has-bouncing="false"></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -54,7 +54,7 @@ describe('Ionic Content directive', function() {
it('Disables bouncing by default on Android', function() {
ionic.Platform.setPlatform('Android');
element = compile('<content has-header="true"></content>')(scope);
element = compile('<ion-content has-header="true"></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -63,7 +63,7 @@ describe('Ionic Content directive', function() {
it('Disables bouncing by default on Android unless has-bouncing = true', function() {
ionic.Platform.setPlatform('Android');
element = compile('<content has-header="true" has-bouncing="true"></content>')(scope);
element = compile('<ion-content has-header="true" has-bouncing="true"></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -72,7 +72,7 @@ describe('Ionic Content directive', function() {
it('Should set start x and y', function() {
element = compile('<content start-x="100" start-y="300" has-header="true"></content>')(scope);
element = compile('<ion-content start-x="100" start-y="300" has-header="true"></ion-content>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -87,7 +87,7 @@ describe('Ionic Content directive', function() {
var parent = angular.element('<div>');
//Make a phony element that tells the world it's a navView when in reality it's just a div
parent.data('$navViewController', true);
parent.append('<content><br/><div>hello</div><br/></content>');
parent.append('<ion-content><br/><div>hello</div><br/></ion-content>');
compile(parent)(scope);
scope.$apply();

88
js/ext/angular/test/directive/ionicList.unit.js
View File

@@ -15,7 +15,7 @@ describe('Ionic List', function() {
scope.showDelete = false;
scope.showReorder = false;
listElement = angular.element('<list show-delete="showDelete" show-reorder="showReorder">');
listElement = angular.element('<ion-list show-delete="showDelete" show-reorder="showReorder">');
listElement = _$compile_(listElement)(scope);
listCtrl = listElement.controller('list');
@@ -24,16 +24,16 @@ describe('Ionic List', function() {
}));
it('Should init', function() {
var element = compile('<list>' +
'<item></item>' +
'<item></item>' +
'</list>')(scope);
var element = compile('<ion-list>' +
'<ion-item></ion-item>' +
'<ion-item></ion-item>' +
'</ion-list>')(scope);
expect(element.children().length).toBe(2);
});
it('Should add animation class', function() {
var element = compile('<list animation="my-animation">')(scope);
var element = compile('<ion-list animation="my-animation">')(scope);
expect(element.hasClass('my-animation')).toBe(true);
});
@@ -62,7 +62,7 @@ describe('Ionic List', function() {
scope.onReorder = function(el, start, end) {
};
listElement = angular.element('<list on-reorder="onReorder(el, start, end)"></list>');
listElement = angular.element('<ion-list on-reorder="onReorder(el, start, end)"></ion-list>');
listElement = compile(listElement)(scope);
var lv = listElement.isolateScope().listView;
@@ -85,13 +85,13 @@ describe('Ionic Item Directive', function () {
$compile = _$compile_;
$rootScope.showDelete = false;
listElement = angular.element('<list show-delete="showDelete">');
listElement = angular.element('<ion-list show-delete="showDelete">');
listElement = _$compile_(listElement)($rootScope);
listScope = listElement.isolateScope();
listCtrl = listElement.controller('list');
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = _$compile_(itemElement)($rootScope);
$rootScope.$digest();
@@ -99,13 +99,13 @@ describe('Ionic Item Directive', function () {
}));
it('Should set item type from item attribute', inject(function ($timeout) {
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
expect(itemScope.itemClass).toBe(undefined);
itemElement = angular.element('<item item-type="item-type-test">').appendTo(listElement);
itemElement = angular.element('<ion-item item-type="item-type-test">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -114,9 +114,9 @@ describe('Ionic Item Directive', function () {
}));
it('Should set item type from list attribute', inject(function ($timeout) {
listElement = angular.element('<list item-type="list-item-type-test">');
listElement = angular.element('<ion-list item-type="list-item-type-test">');
listElement = $compile(listElement)($rootScope);
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -124,7 +124,7 @@ describe('Ionic Item Directive', function () {
}));
it('Should item option buttons from item attribute', inject(function ($timeout) {
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -135,7 +135,7 @@ describe('Ionic Item Directive', function () {
$rootScope.buttons = [
{ text: 'Edit' }, { text: 'Cancel' }
];
itemElement = angular.element('<item option-buttons="buttons">').appendTo(listElement);
itemElement = angular.element('<ion-item option-buttons="buttons">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -149,12 +149,12 @@ describe('Ionic Item Directive', function () {
{ text: 'Edit' }, { text: 'Cancel' }
];
listElement = angular.element('<list option-buttons="buttons">');
listElement = angular.element('<ion-list option-buttons="buttons">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
expect(listScope.optionButtons().length ).toBe(2);
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -169,7 +169,7 @@ describe('Ionic Item Directive', function () {
{ text: 'Edit' }, { text: 'Cancel' }
];
itemElement = angular.element('<item can-swipe="false" option-buttons="buttons">').appendTo(listElement);
itemElement = angular.element('<ion-item can-swipe="false" option-buttons="buttons">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -182,12 +182,12 @@ describe('Ionic Item Directive', function () {
{ text: 'Edit' }, { text: 'Cancel' }
];
listElement = angular.element('<list can-swipe="false" option-buttons="buttons">');
listElement = angular.element('<ion-list can-swipe="false" option-buttons="buttons">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
expect(listScope.optionButtons().length ).toBe(2);
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -196,7 +196,7 @@ describe('Ionic Item Directive', function () {
}));
it('Should hide delete w/ item can-delete attribute true but no list or item onDelete', inject(function ($timeout) {
itemElement = angular.element('<item can-delete="true">').appendTo(listElement);
itemElement = angular.element('<ion-item can-delete="true">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -206,7 +206,7 @@ describe('Ionic Item Directive', function () {
it('Should hide delete w/ item can-delete attribute false but with item onDelete', inject(function ($timeout) {
$rootScope.onDelete = function() {};
itemElement = angular.element('<item can-delete="false" on-delete="onDelete">').appendTo(listElement);
itemElement = angular.element('<ion-item can-delete="false" on-delete="onDelete">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -216,7 +216,7 @@ describe('Ionic Item Directive', function () {
it('Should show delete w/ no item can-delete attribute but with item onDelete', inject(function ($timeout) {
$rootScope.onDelete = function() {};
itemElement = angular.element('<item on-delete="onDelete" delete-icon="test-icon">').appendTo(listElement);
itemElement = angular.element('<ion-item on-delete="onDelete" delete-icon="test-icon">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -227,11 +227,11 @@ describe('Ionic Item Directive', function () {
it('Should hide delete w/ list can-delete attribute true but no list or item onDelete', inject(function ($timeout) {
$rootScope.onDelete = function() {};
listElement = angular.element('<list can-delete="true">');
listElement = angular.element('<ion-list can-delete="true">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -241,11 +241,11 @@ describe('Ionic Item Directive', function () {
it('Should hide delete w/ list can-delete attribute false but with list onDelete', inject(function ($timeout) {
$rootScope.onDelete = function() {};
listElement = angular.element('<list can-delete="false" on-delete="onDelete">');
listElement = angular.element('<ion-list can-delete="false" on-delete="onDelete">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -255,11 +255,11 @@ describe('Ionic Item Directive', function () {
it('Should hide delete w/ list can-delete attribute false but with item onDelete', inject(function ($timeout) {
$rootScope.onDelete = function() {};
listElement = angular.element('<list can-delete="false">');
listElement = angular.element('<ion-list can-delete="false">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
itemElement = angular.element('<item on-delete="onDelete">').appendTo(listElement);
itemElement = angular.element('<ion-item on-delete="onDelete">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -269,10 +269,10 @@ describe('Ionic Item Directive', function () {
it('Should show delete w/ no can-delete attribute but with list onDelete', inject(function ($timeout) {
$rootScope.onDelete = function() {};
listElement = angular.element('<list on-delete="onDelete" delete-icon="test-icon">');
listElement = angular.element('<ion-list on-delete="onDelete" delete-icon="test-icon">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -283,7 +283,7 @@ describe('Ionic Item Directive', function () {
}));
it('Should not be able to reorder cuz no item or list can-reorder attribute true', inject(function ($timeout) {
itemElement = angular.element('<item reorder-icon="test-icon">').appendTo(listElement);
itemElement = angular.element('<ion-item reorder-icon="test-icon">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -292,7 +292,7 @@ describe('Ionic Item Directive', function () {
}));
it('Should be able to reorder cuz item can-reorder attribute true', inject(function ($timeout) {
itemElement = angular.element('<item can-reorder="true" reorder-icon="test-icon">').appendTo(listElement);
itemElement = angular.element('<ion-item can-reorder="true" reorder-icon="test-icon">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -301,10 +301,10 @@ describe('Ionic Item Directive', function () {
}));
it('Should be able to reorder cuz list can-reorder attribute true', inject(function ($timeout) {
listElement = angular.element('<list can-reorder="true" reorder-icon="test-icon">');
listElement = angular.element('<ion-list can-reorder="true" reorder-icon="test-icon">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -313,7 +313,7 @@ describe('Ionic Item Directive', function () {
}));
it('Should not have options cuz no optionButtons', inject(function ($timeout) {
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -322,10 +322,10 @@ describe('Ionic Item Directive', function () {
}));
it('Should be able to reorder cuz list can-reorder attribute false and item can-reorder true', inject(function ($timeout) {
listElement = angular.element('<list can-reorder="false">');
listElement = angular.element('<ion-list can-reorder="false">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
itemElement = angular.element('<item can-reorder="true">').appendTo(listElement);
itemElement = angular.element('<ion-item can-reorder="true">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -335,7 +335,7 @@ describe('Ionic Item Directive', function () {
it('Should not have options cuz item can-swipe false', inject(function ($timeout) {
$rootScope.optionButtons = [{text:'BUTTON'}];
itemElement = angular.element('<item option-buttons="optionButtons" can-swipe="false">').appendTo(listElement);
itemElement = angular.element('<ion-item option-buttons="optionButtons" can-swipe="false">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -345,10 +345,10 @@ describe('Ionic Item Directive', function () {
it('Should not have options cuz list can-swipe false', inject(function ($timeout) {
$rootScope.optionButtons = [{text:'BUTTON'}];
listElement = angular.element('<list option-buttons="optionButtons" can-swipe="false">');
listElement = angular.element('<ion-list option-buttons="optionButtons" can-swipe="false">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -358,7 +358,7 @@ describe('Ionic Item Directive', function () {
it('Should have options cuz item option-buttons and no can-swipe false', inject(function ($timeout) {
$rootScope.optionButtons = [{text:'BUTTON'}];
itemElement = angular.element('<item option-buttons="optionButtons">').appendTo(listElement);
itemElement = angular.element('<ion-item option-buttons="optionButtons">').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();
@@ -368,10 +368,10 @@ describe('Ionic Item Directive', function () {
it('Should have options cuz list option-buttons and no can-swipe false', inject(function ($timeout) {
$rootScope.optionButtons = [{text:'BUTTON'}];
listElement = angular.element('<list option-buttons="optionButtons">');
listElement = angular.element('<ion-list option-buttons="optionButtons">');
listElement = $compile(listElement)($rootScope);
listScope = listElement.isolateScope();
itemElement = angular.element('<item>').appendTo(listElement);
itemElement = angular.element('<ion-item>').appendTo(listElement);
itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
itemScope = itemElement.isolateScope();

6
js/ext/angular/test/directive/ionicNavView.unit.js
View File

@@ -6,13 +6,13 @@ describe('Ionic nav-view', function() {
compile = $compile;
scope = $rootScope.$new();
}));
it('should publish a controller', function() {
var view = angular.element('<nav-view></nav-view>');
var view = angular.element('<ion-nav-view></ion-nav-view>');
compile(view)(scope);
scope.$apply();
expect(view.controller('navView')).toBeTruthy();
expect(view.controller('ionNavView')).toBeTruthy();
});
/*

14
js/ext/angular/test/directive/ionicScroll.unit.js
View File

@@ -15,17 +15,17 @@ describe('Ionic Scroll Directive', function() {
}));
it('Has $ionicScroll controller', function() {
element = compile('<scroll></scroll>')(scope);
element = compile('<ion-scroll></ion-scroll>')(scope);
expect(element.controller('$ionicScroll').element).toBe(element[0]);
});
it('Has scroll-view class', function() {
element = compile('<scroll></scroll>')(scope);
element = compile('<ion-scroll></ion-scroll>')(scope);
expect(element.hasClass('scroll-view')).toBe(true);
});
it('should add padding classname', function() {
element = compile('<scroll padding="true"></scroll>')(scope);
element = compile('<ion-scroll padding="true"></ion-scroll>')(scope);
expect(element.children().eq(0).hasClass('padding')).toEqual(true);
var scrollElement = element.find('.scroll');
expect(scrollElement.hasClass('padding')).toEqual(true);
@@ -33,7 +33,7 @@ describe('Ionic Scroll Directive', function() {
it('Enables bouncing by default', function() {
ionic.Platform.setPlatform('iPhone');
element = compile('<content has-header="true"></scroll>')(scope);
element = compile('<ion-content has-header="true"></ion-scroll>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -42,7 +42,7 @@ describe('Ionic Scroll Directive', function() {
it('Disables bouncing when has-bouncing = false', function() {
ionic.Platform.setPlatform('iPhone');
element = compile('<content has-header="true" has-bouncing="false"></scroll>')(scope);
element = compile('<ion-content has-header="true" has-bouncing="false"></ion-scroll>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -51,7 +51,7 @@ describe('Ionic Scroll Directive', function() {
it('Disables bouncing by default on Android', function() {
ionic.Platform.setPlatform('Android');
element = compile('<content has-header="true"></scroll>')(scope);
element = compile('<ion-content has-header="true"></ion-scroll>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;
@@ -59,7 +59,7 @@ describe('Ionic Scroll Directive', function() {
});
it('Should set start x and y', function() {
element = compile('<content start-x="100" start-y="300" has-header="true"></scroll>')(scope);
element = compile('<ion-content start-x="100" start-y="300" has-header="true"></ion-scroll>')(scope);
scope.$apply();
var newScope = element.isolateScope();
var scrollView = scope.scrollView;

12
js/ext/angular/test/directive/ionicSideMenu.unit.js
View File

@@ -8,7 +8,7 @@ describe('Ionic Angular Side Menu', function() {
beforeEach(module('ionic.ui.sideMenu'));
beforeEach(inject(function($compile, $rootScope) {
el = $compile('<side-menus></side-menus>')($rootScope);
el = $compile('<ion-side-menus></ion-side-menus>')($rootScope);
}));
it('Should init', function() {
@@ -26,12 +26,12 @@ describe('Ionic Side Menu Content Directive', function () {
$compile = _$compile_;
scope = _$rootScope_;
var sideMenus = $compile('<side-menus>')(scope).appendTo('body');
var sideMenus = $compile('<ion-side-menus>')(scope).appendTo('body');
sideMenuCtrl = sideMenus.controller('sideMenus');
spyOn(sideMenuCtrl, '_handleDrag');
element = angular.element('<div side-menu-content>').appendTo(sideMenus);
element = angular.element('<div ion-side-menu-content>').appendTo(sideMenus);
$compile(element)(scope);
scope.$digest();
@@ -50,11 +50,11 @@ describe('Ionic Side Menu Directive', function () {
$rootScope.widthVal = 250;
$rootScope.enabledVal = true;
var sideMenus = $compile('<side-menus>')($rootScope);
var sideMenus = $compile('<ion-side-menus>')($rootScope);
sideMenuCtrl = sideMenus.controller('sideMenus');
sideMenuCtrl = sideMenus.controller('ionSideMenus');
element = angular.element('<side-menu side="left" is-enabled="enabledVal" width="widthVal">').appendTo(sideMenus);
element = angular.element('<ion-side-menu side="left" is-enabled="enabledVal" width="widthVal">').appendTo(sideMenus);
$compile(element)($rootScope);
scope = element.scope();

32
js/ext/angular/test/directive/ionicSlideBox.unit.js
View File

@@ -13,21 +13,21 @@ describe('Ionic Angular Slide Box', function() {
rootScope = $rootScope;
compile = $compile;
el = $compile('<slide-box>\
<slide>\
el = $compile('<ion-slide-box>\
<ion-slide>\
<div class="box blue">\
<h1>BLUE {{slideBox.slideIndex}}</h1>\
</div>\
</slide>\
<slide>\
</ion-slide>\
<ion-slide>\
<div class="box yellow">\
<h1>YELLOW {{slideBox.slideIndex}}</h1>\
</div>\
</slide>\
<slide>\
</ion-slide>\
<ion-slide>\
<div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>\
</slide>\
</slide-box>')($rootScope);
</ion-slide>\
</ion-slide-box>')($rootScope);
}));
it('Should init', function() {
@@ -45,21 +45,21 @@ describe('Ionic Angular Slide Box', function() {
});
it('Should set initial active slide', function() {
el = compile('<slide-box active-slide="2">\
<slide>\
el = compile('<ion-slide-box active-slide="2">\
<ion-slide>\
<div class="box blue">\
<h1>BLUE {{slideBox.slideIndex}}</h1>\
</div>\
</slide>\
<slide>\
</ion-slide>\
<ion-slide>\
<div class="box yellow">\
<h1>YELLOW {{slideBox.slideIndex}}</h1>\
</div>\
</slide>\
<slide>\
</ion-slide>\
<ion-slide>\
<div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>\
</slide>\
</slide-box>')(rootScope);
</ion-slide>\
</ion-slide-box>')(rootScope);
var scope = el.scope();
expect(scope.slideBox.getPos()).toBe(2);

44
js/ext/angular/test/directive/ionicTabBar.unit.js
View File

@@ -119,13 +119,13 @@ describe('tabs', function() {
}));
it('Has tab class', function() {
var element = compile('<tabs></tabs>')(scope);
var element = compile('<ion-tabs></ion-tabs>')(scope);
scope.$digest();
expect(element.find('.tabs').hasClass('tabs')).toBe(true);
});
it('Has tab children', function() {
element = compile('<tabs></tabs>')(scope);
element = compile('<ion-tabs></ion-tabs>')(scope);
scope = element.scope();
scope.controllers = [
{ title: 'Home', icon: 'icon-home' },
@@ -137,19 +137,19 @@ describe('tabs', function() {
});
it('Has compiled children', function() {
element = compile('<tabs>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'</tabs>')(scope);
element = compile('<ion-tabs>' +
'<ion-tab active="true" title="Item" icon="icon-default"></ion-tab>' +
'<ion-tab active="true" title="Item" icon="icon-default"></ion-tab>' +
'</ion-tabs>')(scope);
scope.$digest();
expect(element.find('a').length).toBe(2);
});
it('Sets style on child tabs', function() {
element = compile('<tabs tabs-type="tabs-positive" tabs-style="tabs-icon-bottom">' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'</tabs>')(scope);
element = compile('<ion-tabs tabs-type="tabs-positive" tabs-style="tabs-icon-bottom">' +
'<ion-tab active="true" title="Item" icon="icon-default"></ion-tab>' +
'<ion-tab active="true" title="Item" icon="icon-default"></ion-tab>' +
'</ion-tabs>')(scope);
scope.$digest();
var tabs = element[0].querySelector('.tabs');
expect(angular.element(tabs).hasClass('tabs-positive')).toEqual(true);
@@ -157,10 +157,10 @@ describe('tabs', function() {
});
it('Has nav-view', function() {
element = compile('<tabs>' +
'<tab active="true" title="Item 1" href="#/page1"><nav-view name="name1"></nav-view></tab>' +
'<tab active="true" title="Item 2" href="/page2">content2</tab>' +
'</tabs>')(scope);
element = compile('<ion-tabs>' +
'<ion-tab active="true" title="Item 1" href="#/page1"><ion-nav-view name="name1"></ion-nav-view></ion-tab>' +
'<ion-tab active="true" title="Item 2" href="/page2">content2</ion-tab>' +
'</ion-tabs>')(scope);
scope = element.scope();
scope.$digest();
expect(scope.tabCount).toEqual(2);
@@ -184,9 +184,9 @@ describe('tabs', function() {
scope.badgeValue = 3;
scope.badgeStyleValue = 'badge-assertive';
element = compile('<tabs>' +
'<tab title="Item" icon="icon-default" badge="badgeValue" badge-style="{{badgeStyleValue}}"></tab>' +
'</tabs>')(scope);
element = compile('<ion-tabs>' +
'<ion-tab title="Item" icon="icon-default" badge="badgeValue" badge-style="{{badgeStyleValue}}"></ion-tab>' +
'</ion-tabs>')(scope);
scope.$digest();
$document[0].body.appendChild(element[0]);
}));
@@ -238,8 +238,8 @@ describe('tabs', function() {
$scope: tabsScope
});
//Create an outer div that has a tabsController on it so tab thinks it's in a <tabs>
var element = angular.element('<div><tab><div class="my-content"></div></tab></div>');
//Create an outer div that has a tabsController on it so ion-tab thinks it's in a <ion-tabs>
var element = angular.element('<div><ion-tab><div class="my-content"></div></ion-tab></div>');
element.data('$tabsController', ctrl);
$compile(element)(tabsScope)
tabsScope.$apply();
@@ -258,9 +258,9 @@ describe('tabs', function() {
scope.badgeValue = 3;
scope.isActive = false;
element = compile('<tabs class="tabs">' +
'<tab-controller-item icon-title="Icon <b>title</b>" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" badge-style="badgeStyle" active="isActive" index="0"></tab-controller-item>' +
'</tabs>')(scope);
element = compile('<ion-tabs class="tabs">' +
'<ion-tab-controller-item icon-title="Icon <b>title</b>" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" badge-style="badgeStyle" active="isActive" index="0"></ion-tab-controller-item>' +
'</ion-tabs>')(scope);
scope.$digest();
$document[0].body.appendChild(element[0]);
}));

4
js/ext/angular/test/directive/ionicToggle.unit.js
View File

@@ -6,7 +6,7 @@ describe('Ionic Toggle', function() {
beforeEach(inject(function($compile, $rootScope) {
compile = $compile;
rootScope = $rootScope;
el = $compile('<toggle ng-model="data.name"></toggle>')($rootScope);
el = $compile('<ion-toggle ng-model="data.name"></ion-toggle>')($rootScope);
}));
/*
@@ -29,7 +29,7 @@ describe('Ionic Toggle', function() {
it('Should disable and enable', function() {
rootScope.data = { isDisabled: false };
el = compile('<toggle ng-model="data.name" ng-disabled="data.isDisabled"></toggle>')(rootScope);
el = compile('<ion-toggle ng-model="data.name" ng-disabled="data.isDisabled"></ion-toggle>')(rootScope);
var toggle = el.isolateScope().toggle;
expect(toggle.val()).toBe(false);
el.click();

44
js/ext/angular/test/directive/ionicView.unit.js
View File

@@ -11,42 +11,42 @@ describe('Ionic View', function() {
}));
it('should init a view', function() {
var element = compile('<view>me view</view>')(scope);
var element = compile('<ion-view>me view</ion-view>')(scope);
expect(element.html()).toEqual('me view');
});
it('should add pane classname and remove title from view', function() {
var element = compile('<view title="\'Me Title\'"></view>')(scope);
var element = compile('<ion-view title="\'Me Title\'"></ion-view>')(scope);
expect(element.attr('title')).toBeUndefined();
expect(element.hasClass('pane')).toEqual(true);
});
it('should broacast view enter on link', function() {
spyOn(scope, '$broadcast');
var element = compile('<view title="\'Me Title\'"></view>')(scope);
var element = compile('<ion-view title="\'Me Title\'"></ion-view>')(scope);
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.viewEnter', { title: 'Me Title', navDirection: undefined });
scope.$navDirection = 'forward';
element = compile('<view title="\'Me Title\'"></view>')(scope);
element = compile('<ion-view title="\'Me Title\'"></ion-view>')(scope);
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.viewEnter', { title: 'Me Title', navDirection: 'forward' });
});
it('should set hide back button', function() {
spyOn(scope, '$broadcast');
var element = compile('<view></view>')(scope);
var element = compile('<ion-view></ion-view>')(scope);
var viewScope = element.isolateScope();
expect(viewScope.hideBackButton).toBeUndefined();
expect(scope.$broadcast).not.toHaveBeenCalledWith('viewState.showBackButton', false);
element = compile('<view hide-back-button="true"></view>')(scope);
element = compile('<ion-view hide-back-button="true"></ion-view>')(scope);
viewScope = element.isolateScope();
expect(viewScope.hideBackButton).toEqual(true);
expect(scope.$broadcast).toHaveBeenCalledWith('viewState.showBackButton', false);
});
it('should add/remove back button based on events', function() {
var element = compile('<nav-bar back-button-label="Back"></nav-bar>')(scope);
var element = compile('<ion-nav-bar back-button-label="Back"></ion-nav-bar>')(scope);
scope.$apply();
function backButton() {
return angular.element(element[0].querySelector('.back-button'));
@@ -71,7 +71,7 @@ describe('Ionic View', function() {
});
it('should show/hide navBar', function() {
var element = compile('<nav-bar></nav-bar>')(scope);
var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
scope.$digest();
expect(element.hasClass('invisible')).toEqual(true);
scope.$broadcast('viewState.showNavBar', true);
@@ -83,7 +83,7 @@ describe('Ionic View', function() {
});
it('should have have animateEnabled=true if there is a navDirection and animate isnt false', function() {
var element = compile('<nav-bar></nav-bar>')(scope);
var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
scope.$digest();
scope = element.isolateScope();
@@ -101,7 +101,7 @@ describe('Ionic View', function() {
});
it('should hide navBar when using view attr', function() {
var element = compile('<div><nav-bar></nav-bar><view hide-nav-bar="true"></view></div>')(scope);
var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view hide-nav-bar="true"></ion-view></div>')(scope);
scope.$digest();
var navBar = element.find('header')
expect(navBar.hasClass('invisible')).toEqual(true);
@@ -109,7 +109,7 @@ describe('Ionic View', function() {
it('should show and update navBar title when using view attr or events', function() {
scope.viewTitle = 'Title';
var element = compile('<div><nav-bar></nav-bar><view title="viewTitle"></view></div>')(scope);
var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view title="viewTitle"></ion-view></div>')(scope);
scope.$digest();
var navBar = element.find('header');
var title = navBar.find('h1');
@@ -135,7 +135,7 @@ describe('Ionic View', function() {
type: 'button',
content: 'Right Button'
}];
var element = compile('<div><nav-bar></nav-bar><view left-buttons="leftButtons" right-buttons="rightButtons"></view></div>')(scope);
var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view left-buttons="leftButtons" right-buttons="rightButtons"></ion-view></div>')(scope);
scope.$digest();
var leftButton = angular.element(element[0].querySelector('.left-buttons')).find('button');
@@ -177,55 +177,55 @@ describe('Ionic View', function() {
});
it('should show navbar when not using view attr', function() {
var element = compile('<div><nav-bar></nav-bar><view></view></div>')(scope);
var element = compile('<div><ion-nav-bar></ion-nav-bar><ion-view></ion-view></div>')(scope);
scope.$digest();
var navBar = element.find('header')
expect(navBar.hasClass('invisible')).toEqual(false);
});
it('should set the navBar type', function() {
var element = compile('<nav-bar type="bar-positive"></nav-bar>')(scope);
var element = compile('<ion-nav-bar type="bar-positive"></ion-nav-bar>')(scope);
scope.$digest();
expect(element.hasClass('bar-positive')).toEqual(true);
});
it('should not have the back button if no back button attributes set', function() {
var element = compile('<nav-bar></nav-bar>')(scope);
var element = compile('<ion-nav-bar></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(0);
});
it('should have the back button if back-button-type attributes set', function() {
var element = compile('<nav-bar back-button-type="button-icon"></nav-bar>')(scope);
var element = compile('<ion-nav-bar back-button-type="button-icon"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(1);
});
it('should have the back button if back-button-icon attributes set', function() {
var element = compile('<nav-bar back-button-icon="ion-back"></nav-bar>')(scope);
var element = compile('<ion-nav-bar back-button-icon="ion-back"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(1);
});
it('should have the back button if back-button-label attributes set', function() {
var element = compile('<nav-bar back-button-label="Button"></nav-bar>')(scope);
var element = compile('<ion-nav-bar back-button-label="Button"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(1);
});
it('should have the back button if all back button attributes set', function() {
var element = compile('<nav-bar back-button-type="button-icon" back-button-icon="ion-back" back-button-label="Button"></nav-bar>')(scope);
var element = compile('<ion-nav-bar back-button-type="button-icon" back-button-icon="ion-back" back-button-label="Button"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.length).toEqual(1);
});
it('should set just a back button icon, no text', function() {
var element = compile('<nav-bar back-button-icon="ion-back" back-button-type="button-icon"></nav-bar>')(scope);
var element = compile('<ion-nav-bar back-button-icon="ion-back" back-button-type="button-icon"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.hasClass('button')).toEqual(true);
@@ -237,7 +237,7 @@ describe('Ionic View', function() {
});
it('should set just a back button with only text, button-clear', function() {
var element = compile('<nav-bar back-button-label="Back" back-button-type="button-clear"></nav-bar>')(scope);
var element = compile('<ion-nav-bar back-button-label="Back" back-button-type="button-clear"></ion-nav-bar>')(scope);
scope.$apply();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.hasClass('button')).toEqual(true);
@@ -247,7 +247,7 @@ describe('Ionic View', function() {
});
it('should set a back button with an icon and text, button-icon', function() {
var element = compile('<nav-bar back-button-icon="ion-back" back-button-label="Back" back-button-type="button-icon"></nav-bar>')(scope);
var element = compile('<ion-nav-bar back-button-icon="ion-back" back-button-label="Back" back-button-type="button-icon"></ion-nav-bar>')(scope);
scope.$digest();
var backButton = angular.element(element[0].querySelector('.back-button'));
expect(backButton.hasClass('button')).toEqual(true);

10
js/ext/angular/test/header.html
View File

@@ -9,16 +9,16 @@
<script src="../../../../dist/js/ionic.bundle.js"></script>
</head>
<body ng-controller="TestCtrl">
<header-bar
<ion-header-bar
title="headerTitle"
left-buttons="leftButtons"
right-buttons="rightButtons"
type="bar-primary"></header-bar>
<header-bar type="bar-positive" title="headerTitle" left-buttons="leftButtons" right-buttons="rightButtons"></header-bar>
type="bar-primary"></ion-header-bar>
<ion-header-bar type="bar-positive" title="headerTitle" left-buttons="leftButtons" right-buttons="rightButtons"></ion-header-bar>
<content>
<ion-content>
<input type="text" ng-model="headerTitle">
</content>
</ion-content>
<script>
angular.module('headerTest', ['ionic'])

14
js/ext/angular/test/input.html
View File

@@ -17,14 +17,14 @@
</head>
<body ng-controller="AppCtrl">
<view id="view">
<ion-view id="view">
<header>
<label class="item item-input">
<span class="input-label">Header</span>
<input type="text" value="header input">
</label>
</header>
<content has-header="true" padding="true" overflow-scroll="false">
<ion-content has-header="true" padding="true" overflow-scroll="false">
<div class="list">
<label class="item item-input">
<span class="input-label">Your Name</span>
@@ -62,16 +62,16 @@
<a href="tapInputs.html">Tap Inputs</a> -
<a href="/test/">CSS Tests</a>
</p>
</content>
</view>
</ion-content>
</ion-view>
<script id="modal.html" type="text/ng-template">
<div class="modal" ng-controller="ModalCtrl">
<header class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="closeModal()" stop-event="click">Cancel</button>
<button class="button button-clear button-primary" ng-click="closeModal()" ion-stop-event="click">Cancel</button>
</header>
<content has-header="true">
<ion-content has-header="true">
<div class="padding">
<div class="list">
<label class="item item-input">
@@ -89,7 +89,7 @@
<button class="button button-full button-positive" ng-click="closeModal()">Create</button>
</div>
</div>
</content>
</ion-content>
</div>
</script>

14
js/ext/angular/test/list-fit.html
View File

@@ -12,14 +12,14 @@
<body>
<header-bar title="'Sample UL'" type="bar-positive"></header-bar>
<ion-header-bar title="'Sample UL'" type="bar-positive"></ion-header-bar>
<content has-header="true" scroll="true" ng-controller="ContentCtrl" on-refresh="onRefresh()" has-footer="true" padding="false">
<ion-content has-header="true" scroll="true" ng-controller="ContentCtrl" on-refresh="onRefresh()" has-footer="true" padding="false">
<refresher></refresher>
<ion-refresher></ion-refresher>
<ul class="list">
<li class="item">This list should *exactly* fit</li>
<li class="item">This ion-list should *exactly* fit</li>
<li class="item">between header and footer (no gap),</li>
<li class="item">even with pull-to-refresh.</li>
<li class="item">4</li>
@@ -46,11 +46,11 @@
<li class="item">25</li>
<li class="item">26</li>
</ul>
</content>
</ion-content>
<footer-bar type="bar-assertive">
<ion-footer-bar type="bar-assertive">
<h1 class="title">Footer!</h1>
</footer-bar>
</ion-footer-bar>
<script>
function ContentCtrl($scope, $timeout) {

40
js/ext/angular/test/list.html
View File

@@ -78,7 +78,7 @@
</head>
<body ng-controller="TestCtrl">
<pane>
<ion-pane>
<header class="bar bar-header bar-positive">
<div class="buttons">
@@ -90,7 +90,7 @@
</div>
</header>
<content has-header="true">
<ion-content has-header="true">
<div contenteditable="true">
Hello!
@@ -98,7 +98,7 @@
Hello!
</div>
<list show-delete="isDeletingItems"
<ion-list show-delete="isDeletingItems"
show-reorder="isReorderingItems"
on-refresh-holding="refreshHolding()"
on-refresh-opening="refreshOpening(ratio)"
@@ -115,11 +115,11 @@
option-buttons="optionButtons1">
<!-- shows that the item directive does not need attributes and can get values from the list attributes -->
<item item="item" ng-click="itemClick()" class="item-message" ng-repeat="item in items" ng-class="{ active: item.isActive}">
<ion-item ion-item="item" ng-click="itemClick()" class="item-message" ng-repeat="item in items" ng-class="{ active: item.isActive}">
<img ng-src="{{item.face}}">
<h2>{{item.from}}</h2>
<p>{{item.text}}</p>
</item>
</ion-item>
<!-- shows how a divider could be included-->
<div class="item item-divider">
@@ -127,17 +127,17 @@
</div>
<!-- shows it can override the attributes set by the list -->
<item can-delete="false"
<ion-item can-delete="false"
can-reorder="false"
can-swipe="false"
item-type="item-icon-left item-icon-right">
<i class="icon ion-stats-bars"></i>
Individual item directive, but can't do much. Overrides list attributes with its own left and right icons.
<i class="icon ion-arrow-graph-up-right"></i>
</item>
</ion-item>
<!-- shows that the item directive can receive many attributes and overrides the list attributes -->
<item on-delete="deleteItem(item)"
<ion-item on-delete="deleteItem(item)"
delete-icon="ion-trash-a"
reorder-icon="ion-navicon-round"
can-delete="true"
@@ -145,7 +145,7 @@
option-buttons="optionButtons2">
<i class="icon ion-person-stalker"></i>
Individual item directive and overrides list attrs with item attributes
</item>
</ion-item>
<!-- shows how a divider could be included-->
<div class="item item-divider">
@@ -165,28 +165,28 @@
</a>
<input type="text" placeholder="text input">
<div class="item">
<slide-box show-pager="false">
<slide>
<ion-slide-box show-pager="false">
<ion-slide>
<div class="box blue">
<h1>BLUE {{slideBox.slideIndex}}</h1>
</div>
</slide>
<slide>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW {{slideBox.slideIndex}}</h1>
</div>
</slide>
<slide>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK {{slideBox.slideIndex}}</h1></div>
</slide>
</slide-box>
</ion-slide>
</ion-slide-box>
</div>
</list>
</ion-list>
</content>
</ion-content>
</pane>
</ion-pane>
<script>
angular.module('navTest', ['ionic'])

24
js/ext/angular/test/modal.html
View File

@@ -9,17 +9,17 @@
<script src="../../../../dist/js/ionic.bundle.js"></script>
</head>
<body>
<pane ng-controller="AppCtrl">
<header-bar type="bar-positive" title="'Contacts'" right-buttons="contactsRightButtons">
</header-bar>
<content has-header="true">
<list>
<item ng-repeat="contact in contacts">
<ion-pane ng-controller="AppCtrl">
<ion-header-bar type="bar-positive" title="'Contacts'" right-buttons="contactsRightButtons">
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item ng-repeat="contact in contacts">
{{contact.name}}
</item>
</list>
</content>
</pane>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
<script id="modal.html" type="text/ng-template">
<div class="modal" ng-controller="ModalCtrl">
@@ -27,7 +27,7 @@
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="close()">Cancel</button>
</header>
<content has-header="true">
<ion-content has-header="true">
<div class="padding">
<div class="list">
<label class="item item-input">
@@ -45,7 +45,7 @@
<button class="button button-full button-positive" ng-click="closeModal()">Create</button>
</div>
</div>
</content>
</ion-content>
</div>
</script>

12
js/ext/angular/test/nestedScroll.html
View File

@@ -13,16 +13,16 @@
<body>
<div ng-controller="Ctrl">
<header-bar title="title" type="bar-positive">
</header-bar>
<content has-header="true" style="background: lightblue;">
<ion-header-bar title="title" type="bar-positive">
</ion-header-bar>
<ion-content has-header="true" style="background: lightblue;">
<h1>outer</h1>
<scroll style="background: lightgreen; height: 200px;">
<ion-scroll style="background: lightgreen; height: 200px;">
<h1>inner</h1>
<p ng-repeat="i in range">{{i}}</p>
</scroll>
</ion-scroll>
<p ng-repeat="i in range">{{i}}</p>
</content>
</ion-content>
</div>
<script>
function Ctrl($scope) {

36
js/ext/angular/test/overflow.html
View File

@@ -49,11 +49,11 @@
</head>
<body ng-controller="AppCtrl">
<side-menus>
<pane side-menu-content>
<header-bar
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-header-bar
title="'Title'"
type="bar-primary"></header-bar>
type="bar-primary"></ion-header-bar>
<div class="bar bar-subheader">
<div class="button-bar">
@@ -63,7 +63,7 @@
</div>
</div>
<content
<ion-content
has-header="false"
has-subheader="true"
has-footer="true"
@@ -71,37 +71,37 @@
>
<div style="height: 3000px; width: 100%; background: url('tree_bark.png') repeat"></div>
</content>
</ion-content>
<footer-bar type="bar-assertive">
<ion-footer-bar type="bar-assertive">
<h1 class="title">Footer</h1>
</footer-bar>
</pane>
<side-menu side="left">
</ion-footer-bar>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<h1 class="title">Left</h1>
</header>
<content has-header="true" overflow-scroll="true">
<ion-content has-header="true" overflow-scroll="true">
<ul class="list">
<a href="#" class="item" ng-repeat="item in list">
{{item.text}}
</a>
</ul>
</content>
</side-menu>
<side-menu side="right">
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<header class="bar bar-header bar-assertive">
<h1 class="title">Right</h1>
</header>
<content has-header="true">
<ion-content has-header="true">
<ul class="list">
<a href="#" class="item" ng-repeat="item in list">
{{item.text}}
</a>
</ul>
</content>
</side-menu>
</side-menus>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script>
angular.module('navTest', ['ionic'])

6
js/ext/angular/test/radioButton.html
View File

@@ -13,14 +13,14 @@
<header class="bar bar-header bar-danger">
<h1 class="title">Beans</h1>
</header>
<content has-header="true"class="reveal-animation">
<ion-content has-header="true"class="reveal-animation">
<div ng-controller="TestCtrl">
<div class="list">
<label class="item item-input">
<span class="input-label">Units</span>
<!--<radio-buttons ng-model="data.isLovely">-->
<!--<ion-radio-buttons ng-model="data.isLovely">-->
<div class="button-bar">
<button class="button button-assertive button-radio" ng-value="'magical'" ng-click="magical()">Magical</button>
<button class="button button-assertive button-radio" ng-value="'black'">Black</button>
@@ -34,7 +34,7 @@
<button ng-click="doIt()" class="button button-warning">Print</button>
</form>
</div>
</content>
</ion-content>
<script>
angular.module('radioButtonTest', ['ionic'])

16
js/ext/angular/test/scroll.html
View File

@@ -48,11 +48,11 @@
</style>
</head>
<body ng-controller="ThisCtrl">
<pane>
<ion-pane>
<content has-header="true" scroll="false">
<ion-content has-header="true" scroll="false">
<h3>Hourly Forecast</h3>
<scroll direction="x" style="width: 100%; height: 20%;">
<ion-scroll direction="x" style="width: 100%; height: 20%;">
<div class="hours">
<div ng-repeat="hour in hours">
<div class="icons">
@@ -65,15 +65,15 @@
</div>
</div>
</div>
</scroll>
</ion-scroll>
<a class="button" ng-click="scrollTo()">
Scroll to 100
</a>
<scroll direction="y" style="height: 400px; width: 300px; background: red;">
<ion-scroll direction="y" style="height: 400px; width: 300px; background: red;">
<div style="width: 100px; height: 4000px; background: url('tree_bark.png') repeat"></div>
</scroll>
</content>
</pane>
</ion-scroll>
</ion-content>
</ion-pane>
<script>
angular.module('navTest', ['ionic'])

14
js/ext/angular/test/service/delegates/ionicScrollDelegate.unit.js
View File

@@ -13,14 +13,14 @@ describe('Ionic ScrollDelegate Service', function() {
it('Should get scroll view', function() {
var scope = rootScope.$new();
var el = compile('<content></content>')(scope);
var el = compile('<ion-content></ion-content>')(scope);
var sv = del.getScrollView(scope);
expect(sv).not.toBe(undefined);
});
it('should resize', function() {
var scope = rootScope.$new();
var el = compile('<content></content>')(scope);
var el = compile('<ion-content></ion-content>')(scope);
var sv = del.getScrollView(scope);
spyOn(sv, 'resize');
@@ -69,7 +69,7 @@ describe('Ionic ScrollDelegate Service', function() {
});
it('should resize & scroll top', function() {
var scope = rootScope.$new();
var el = compile('<content start-y="100"></content>')(scope);
var el = compile('<ion-content start-y="100"></ion-content>')(scope);
var sv = del.getScrollView(scope);
spyOn(sv, 'resize');
@@ -83,7 +83,7 @@ describe('Ionic ScrollDelegate Service', function() {
it('should resize & scroll bottom', function() {
var scope = rootScope.$new();
var el = compile('<content start-y="100"><br/><br/></content>')(scope);
var el = compile('<ion-content start-y="100"><br/><br/></ion-content>')(scope);
var sv = del.getScrollView(scope);
spyOn(sv, 'getScrollMax').andCallFake(function() {
@@ -101,7 +101,7 @@ describe('Ionic ScrollDelegate Service', function() {
it('should resize & scrollTo', function() {
var scope = rootScope.$new();
var el = compile('<content start-y="100"><br/><br/></content>')(scope);
var el = compile('<ion-content start-y="100"><br/><br/></ion-content>')(scope);
var sv = del.getScrollView(scope);
spyOn(sv, 'scrollTo');
@@ -117,7 +117,7 @@ describe('Ionic ScrollDelegate Service', function() {
it('should finish refreshing', function() {
var scope = rootScope.$new();
var el = compile('<content start-y="100"></content>')(scope);
var el = compile('<ion-content start-y="100"></ion-content>')(scope);
var sv = del.getScrollView(scope);
spyOn(sv, 'finishPullToRefresh');
@@ -144,7 +144,7 @@ describe('anchorScroll', function() {
var contentEl, scope, del, timeout;
beforeEach(inject(function($rootScope, $compile, $timeout, $document, $ionicScrollDelegate) {
scope = $rootScope.$new();
contentEl = $compile('<content></content>')(scope);
contentEl = $compile('<ion-content></ion-content>')(scope);
document.body.appendChild(contentEl[0]);
del = $ionicScrollDelegate;

2
js/ext/angular/test/service/delegates/sideMenuDelegate.unit.js
View File

@@ -13,7 +13,7 @@ describe('Ionic SideMenuDelegate Service', function() {
it('Should get from scope', function() {
var scope = rootScope.$new();
var el = compile('<side-menus></side-menus>')(scope);
var el = compile('<ion-side-menus></ion-side-menus>')(scope);
var sc = del.getSideMenuController(scope);
expect(sc).not.toBe(undefined);

30
js/ext/angular/test/sideMenu.html
View File

@@ -11,43 +11,43 @@
<body>
<div ng-controller="MenuCtrl">
<side-menus>
<pane side-menu-content drag-content="$root.$draggy">
<ion-side-menus>
<ion-pane ion-side-menu-content drag-content="$root.$draggy">
<header class="bar bar-header bar-assertive">
<button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
<h1 class="title">Slide me</h1>
</header>
<content has-header="true">
<toggle ng-model="$root.$draggy">Hello</toggle>
<ion-content has-header="true">
<ion-toggle ng-model="$root.$draggy">Hello</ion-toggle>
<input type="range" ng-model="$root.menuWidth" min="0" max="300">
<h1>Content</h1>
</content>
</pane>
<side-menu side="left" width="$root.menuWidth || 200">
</ion-content>
</ion-pane>
<ion-side-menu side="left" width="$root.menuWidth || 200">
<header class="bar bar-header bar-assertive">
<h1 class="title">Left</h1>
</header>
<content has-header="true">
<ion-content has-header="true">
<ul class="list">
<a href="#" class="item" ng-repeat="item in list">
{{item.text}}
</a>
</ul>
</content>
</side-menu>
<side-menu side="right">
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<header class="bar bar-header bar-assertive">
<h1 class="title">Right</h1>
</header>
<content>
<ion-content>
<ul class="list">
<a href="#" class="item" ng-repeat="item in list">
{{item.text}}
</a>
</ul>
</content>
</side-menu>
</side-menus>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
<script>
angular.module('sideMenuTest', ['ionic'])

60
js/ext/angular/test/sideMenu2.html
View File

@@ -11,24 +11,24 @@
<body>
<div ng-controller="MainCtrl">
<nav-view></nav-view>
<ion-nav-view></ion-nav-view>
</div>
<script id="event-menu.html" type="text/ng-template">
<side-menus>
<ion-side-menus>
<pane side-menu-content>
<nav-bar type="bar-positive"
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></nav-bar>
<nav-view name="menuContent"></nav-view>
</pane>
back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-pane>
<side-menu side="left">
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Left Menu</div>
</header>
<content has-header="true">
<ion-content has-header="true">
<div class="list">
<a href="#/event/check-in" class="item">Check-in</a>
<a href="#/event/attendees" class="item">Attendees</a>
@@ -41,28 +41,28 @@
<i class="icon ion-volume-high"></i>
</div>
</div>
</content>
</side-menu>
</ion-content>
</ion-side-menu>
</side-menus>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<view title="'Welcome'">
<content has-header="true" padding="true">
<ion-view title="'Welcome'">
<ion-content has-header="true" padding="true">
<p>Swipe to the right to reveal the left menu.</p>
<div class="button" ng-click="sideMenuController.toggleLeft()" style="position: absolute; left: 100px; top: 200px;">
Left Menu
</div>
<p ng-repeat="p in range">{{$index}}....</p>
<p>(On desktop click and drag from left to right)</p>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script id="check-in.html" type="text/ng-template">
<view title="'Event Check-in'">
<content has-header="true">
<ion-view title="'Event Check-in'">
<ion-content has-header="true">
<form class="list" ng-show="showForm">
<div class="item item-divider">
Attendee Info
@@ -76,17 +76,17 @@
<div class="item item-divider">
Shirt Size
</div>
<radio ng-repeat="shirtSize in shirtSizes"
<ion-radio ng-repeat="shirtSize in shirtSizes"
ng-value="shirtSize.value"
ng-model="attendee.shirtSize">
{{ shirtSize.text }}
</radio>
</ion-radio>
<div class="item item-divider">
Lunch
</div>
<toggle ng-model="attendee.vegetarian">
<ion-toggle ng-model="attendee.vegetarian">
Vegetarian
</toggle>
</ion-toggle>
<div class="padding">
<button class="button button-block" ng-click="submit()">Checkin</button>
</div>
@@ -96,20 +96,20 @@
<pre ng-bind="attendee | json"></pre>
<a href="#/event/attendees">View attendees</a>
</div>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script id="attendees.html" type="text/ng-template">
<view title="'Event Attendees'">
<content has-header="true">
<ion-view title="'Event Attendees'">
<ion-content has-header="true">
<div class="list">
<toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
<ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
ng-model="attendee.arrived"
ng-change="arrivedChange(attendee)">
{{ attendee.firstname }}
{{ attendee.lastname }}
</toggle>
</ion-toggle>
<div class="item item-divider">
Activity
</div>
@@ -117,8 +117,8 @@
{{ msg }}
</div>
</div>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script>

38
js/ext/angular/test/slideBox.html
View File

@@ -43,11 +43,11 @@
<body>
<div ng-controller="SlideCtrl">
<side-menus>
<pane side-menu-content>
<header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
<slide-box on-slide-changed="slideChanged(index)">
<slide ng-controller="FirstSlideCtrl">
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></ion-header-bar>
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide ng-controller="FirstSlideCtrl">
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="app_icon.png">
@@ -61,8 +61,8 @@
<p>
<button class="button button-dark" ng-click="toLast()">Skip to last</button>
</p>
</slide>
<slide>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
@@ -73,22 +73,22 @@
<li>There is no step 3</li>
</ol>
</div>
</slide>
<slide>
<content has-header="true">
</ion-slide>
<ion-slide>
<ion-content has-header="true">
<div style="width: 300px; height: 2000px; background: url('tree_bark.png') repeat"></div>
</content>
</slide>
</slide-box>
</pane>
<side-menu side="left">
</ion-content>
</ion-slide>
</ion-slide-box>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<h1 class="title">Right</h1>
</header>
<content>
</content>
</side-menu>
</side-menus>
<ion-content>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
<script>
angular.module('slideBoxTest', ['ionic'])

18
js/ext/angular/test/slideBoxDynamic.html
View File

@@ -43,16 +43,16 @@
<body>
<div ng-controller="SlideCtrl">
<pane>
<header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></header-bar>
<content has-header="true">
<slide-box>
<slide ng-repeat="page in pages">
<ion-pane>
<ion-header-bar left-buttons="leftButtons" right-buttons="rightButtons" title=""></ion-header-bar>
<ion-content has-header="true">
<ion-slide-box>
<ion-slide ng-repeat="page in pages">
{{page.text}}
</slide>
</slide-box>
</content>
</pane>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-pane>
</div>
<script>
angular.module('slideBoxTest', ['ionic'])

44
js/ext/angular/test/subControllers.html
View File

@@ -10,8 +10,8 @@
</head>
<body>
<side-menus>
<pane side-menu-content>
<ion-side-menus>
<ion-pane ion-side-menu-content>
<header class="bar bar-header bar-dark">
<a href="#" class="button"><i class="icon-reorder"></i></a>
<h1 class="title">Slide me</h1>
@@ -19,51 +19,51 @@
<div class="content has-header">
<h1>Slide me side to side!</h1>
</div>
</pane>
<side-menu side="left">
</ion-pane>
<ion-side-menu side="left">
<h2>Left</h2>
<ul class="list">
<a href="#" class="list-item" ng-repeat="item in list">
{{item.text}}
</a>
</ul>
</side-menu>
<side-menu side="right">
<tabs>
<tab title="Home" icon="ion-home" class="tab-content">
</ion-side-menu>
<ion-side-menu side="right">
<ion-tabs>
<ion-tab title="Home" icon="ion-home" class="tab-content">
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
</header>
<content has-header="true" has-tabs="true">
<ion-content has-header="true" has-tabs="true">
<h1>Home</h1>
<ul class="list">
<a href="#" class="list-item" ng-repeat="item in items">
{{item.title}}
</a>
</ul>
</content>
</tab>
</ion-content>
</ion-tab>
<tab title="About" icon="ion-info" class="tab-content">
<ion-tab title="About" icon="ion-info" class="tab-content">
<header class="bar bar-header bar-success">
<h1 class="title">About</h1>
</header>
<content has-header="true" has-tabs="true">
<ion-content has-header="true" has-tabs="true">
<h1>About Us</h1>
</content>
</tab>
</ion-content>
</ion-tab>
<tab title="Settings" icon="icon-gear" class="tab-content">
<ion-tab title="Settings" icon="icon-gear" class="tab-content">
<header class="bar bar-header bar-dark">
<h1 class="title">Settings</h1>
</header>
<content has-header="true" has-tabs="true">
<ion-content has-header="true" has-tabs="true">
<h1>Settings</h1>
</content>
</tab>
</tabs>
</side-menu>
</side-menus>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-side-menu>
</ion-side-menus>
<script>
angular.module('sideMenuTest', ['ionic']);

44
js/ext/angular/test/tabs.html
View File

@@ -47,23 +47,23 @@
<script src="../../../../dist/js/ionic.bundle.js"></script>
</head>
<body ng-controller="RootCtrl">
<tabs
<ion-tabs
animation="fade-in-out"
tabs-type="tabs-icon-only"
tabs-style="tabs-top tabs-positive"
controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
<tab title="<img src='http://placekitten.com/40/40'>" ng-controller="HomeCtrl">
<ion-tab title="<img src='http://placekitten.com/40/40'>" ng-controller="HomeCtrl">
<header class="bar bar-header bar-positive">
<button class="button button-icon icon ion-plus" ng-click="newTask()"></button>
<h1 class="title">Tasks</h1>
<button class="button button-clear" ng-click="isDeletingItems = !isDeletingItems">Edit</button>
</header>
<content has-header="true" has-subheader="true" on-refresh="onRefresh()" on-scroll="scroll(scrollTop, scrollLeft)">
<ion-content has-header="true" has-subheader="true" on-refresh="onRefresh()" on-scroll="scroll(scrollTop, scrollLeft)">
<refresher></refresher>
<ion-refresher></ion-refresher>
<list scroll="false"
<ion-list ion-scroll="false"
on-reorder="onReorder(el, start, end)"
can-delete="true"
can-reorder="true"
@@ -74,43 +74,43 @@
delete-icon="ion-minus-circled"
reorder-icon="ion-navicon">
<item ng-repeat="item in items"
<ion-item ng-repeat="item in items"
item="item">
{{item.title}}
</list-item>
</list>
</ion-list>
<button ng-click="goTop()">Go Top</button>
</content>
</tab>
</ion-content>
</ion-tab>
<tab title="Deadlines" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline" badge-style="badge-light" badge="unreadDeadlines">
<ion-tab title="Deadlines" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline" badge-style="badge-light" badge="unreadDeadlines">
<header class="bar bar-header bar-positive">
<h1 class="title">Deadlines</h1>
</header>
<content has-header="true" padding="true">
<ion-content has-header="true" padding="true">
<h1>Deadlines</h1>
</content>
</tab>
</ion-content>
</ion-tab>
<tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
<ion-tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header>
<content has-header="true" padding="true">
<ion-content has-header="true" padding="true">
<h1>Settings</h1>
</content>
</tab>
</ion-content>
</ion-tab>
<tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
<ion-tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header>
<content has-header="true" padding="true">
<ion-content has-header="true" padding="true">
<h1>Settings</h1>
</content>
</tab>
</ion-content>
</ion-tab>
</tabs>
</ion-tabs>
<script id="newTask.html" type="text/ng-template">
<div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">

42
js/ext/angular/test/tapInputs.html
View File

@@ -14,9 +14,9 @@
<body>
<div ng-controller="MyCtrl">
<header-bar title="'Tap Inputs'" type="bar-positive"></header-bar>
<ion-header-bar title="'Tap Inputs'" type="bar-positive"></ion-header-bar>
<content has-header="true">
<ion-content has-header="true">
<form name="myForm">
<div class="list">
@@ -24,44 +24,44 @@
<div class="item item-divider">
Checkbox
</div>
<checkbox ng-model="value1">
<ion-checkbox ng-model="value1">
Checkbox Value 1
</checkbox>
</ion-checkbox>
<div class="item">
Value 1:
<input type="checkbox" ng-model="value1">
{{value1}}
</div>
<checkbox ng-model="value2" ng-true-value="YES" ng-false-value="NO">
<ion-checkbox ng-model="value2" ng-true-value="YES" ng-false-value="NO">
Checkbox Value 2
</checkbox>
</ion-checkbox>
<div class="item">
Value 2:
<input type="checkbox" ng-model="value2" ng-true-value="YES" ng-false-value="NO">
{{value2}}
</div>
<checkbox ng-model="value3" ng-checked="true" ng-true-value="yup" ng-false-value="nope">
<ion-checkbox ng-model="value3" ng-checked="true" ng-true-value="yup" ng-false-value="nope">
Checkbox Initially checked with ng-checked=true, value: {{ value3 }}
</checkbox>
<checkbox ng-model="value4" ng-change="checkboxChange()" ng-true-value="yup" ng-false-value="nope">
</ion-checkbox>
<ion-checkbox ng-model="value4" ng-change="checkboxChange()" ng-true-value="yup" ng-false-value="nope">
Checkbox Change: {{ value4ChangeValue }}
</checkbox>
</ion-checkbox>
<div class="item item-divider">
Toggle
</div>
<toggle ng-model="toggle1">
<ion-toggle ng-model="toggle1">
Toggle 1: {{ toggle1 }}
</toggle>
<toggle ng-model="toggle2" ng-true-value="yup" ng-false-value="nope">
</ion-toggle>
<ion-toggle ng-model="toggle2" ng-true-value="yup" ng-false-value="nope">
Toggle 2: {{ toggle2 }}
</toggle>
<toggle ng-model="toggle3" ng-checked="true">
</ion-toggle>
<ion-toggle ng-model="toggle3" ng-checked="true">
Toggle 3, ng-checked initially set to true, {{ toggle3 }}
</toggle>
<toggle ng-model="toggle4" ng-change="toggleChange()" ng-true-value="yup" ng-false-value="nope">
</ion-toggle>
<ion-toggle ng-model="toggle4" ng-change="toggleChange()" ng-true-value="yup" ng-false-value="nope">
Toggle Change: {{ toggle4ChangeValue }}
</toggle>
</ion-toggle>
<div class="item">
Toggle 1:
<input type="checkbox" ng-model="toggle1">,
@@ -72,13 +72,13 @@
<div class="item item-divider">
Radio
</div>
<radio
<ion-radio
ng-repeat="radioItem in radioItems"
ng-value="radioItem.value"
ng-model="selectedValues.radio"
ng-change="radioChanged()">
{{ radioItem.text }}
</radio>
</ion-radio>
<div class="item">
Selected Radio Value: {{ selectedValues.radio }},
Changed: {{ radioChangeCount }},
@@ -105,7 +105,7 @@
</form>
</content>
</ion-content>
</div>
<script>

8
js/ext/angular/test/toggle.html
View File

@@ -13,15 +13,15 @@
<header class="bar bar-header bar-danger">
<h1 class="title">Toggle</h1>
</header>
<content has-header="true" class="reveal-animation">
<ion-content has-header="true" class="reveal-animation">
<div ng-controller="TestCtrl">
<div class="list">
<toggle ng-model="myModel" ng-disabled="isDisabled">myModel ({{!!myModel}})</toggle>
<toggle ng-model="isDisabled">Disable myModel ({{!!isDisabled}})</toggle>
<ion-toggle ng-model="myModel" ng-disabled="isDisabled">myModel ({{!!myModel}})</ion-toggle>
<ion-toggle ng-model="isDisabled">Disable myModel ({{!!isDisabled}})</ion-toggle>
</div>
</div>
</content>
</ion-content>
<script>
angular.module('toggleTest', ['ionic'])

112
js/ext/angular/test/viewState.html
View File

@@ -3,7 +3,7 @@
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>navViews and tabs w/ nested navViews</title>
<title>navViews and ion-tabs w/ nested navViews</title>
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.bundle.js"></script>
@@ -12,17 +12,17 @@
<body>
<div ng-controller="AppCtrl">
<nav-bar animation="nav-title-slide-ios7"
<ion-nav-bar animation="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-label=" Back"
back-button-icon="ion-arrow-left-c"></nav-bar>
<nav-view animation="slide-left-right"></nav-view>
back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</div>
<script id="sign-in.html" type="text/ng-template">
<view title="'Sign-In'" left-buttons="leftButtons" right-buttons="rightButtons">
<content has-header="true">
<ion-view title="'Sign-In'" left-buttons="leftButtons" right-buttons="rightButtons">
<ion-content has-header="true">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
@@ -48,14 +48,14 @@
Forward View: {{ $viewHistory.forwardView }}
</p>
</div>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script id="forgot-password.html" type="text/ng-template">
<view title="'Forgot Password'" hide-nav-bar="true">
<content has-header="true" padding="true">
<p>This view hides the nav bar using the hideNavBar attribute.</p>
<ion-view title="'Forgot Password'" hide-nav-bar="true">
<ion-content has-header="true" padding="true">
<p>This ion-view hides the nav bar using the hideNavBar attribute.</p>
<p>
<button ng-click="hideNavBar()">Hide Nav Bar</button>
<button ng-click="showNavBar()">Show Nav Bar</button>
@@ -73,13 +73,13 @@
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script id="contact.html" type="text/ng-template">
<view hide-back-button="true">
<content has-header="true" padding="true">
<ion-view hide-back-button="true">
<ion-content has-header="true" padding="true">
<p>The views title is blank on purpose.</p>
<p>The hideBackButton attribute is "true" for this view.</p>
<p>@drifty</p>
@@ -93,29 +93,29 @@
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
<tab title="Automobiles" icon="ion-model-s" href="#/tabs/autos">
<nav-view name="auto-nav-view"></nav-view>
</tab>
<ion-tab title="Automobiles" icon="ion-model-s" href="#/tabs/autos">
<ion-nav-view name="auto-nav-view"></ion-nav-view>
</ion-tab>
<tab title="Add" icon="ion-plus-circled" href="#/tabs/add-auto">
<nav-view name="add-autos-nav-view"></nav-view>
</tab>
<ion-tab title="Add" icon="ion-plus-circled" href="#/tabs/add-auto">
<ion-nav-view name="add-autos-nav-view"></ion-nav-view>
</ion-tab>
<tab title="About" icon="ion-ios7-world" ui-sref="tabs.about">
<nav-view name="about-nav-view"></nav-view>
</tab>
<ion-tab title="About" icon="ion-ios7-world" ui-sref="tabs.about">
<ion-nav-view name="about-nav-view"></ion-nav-view>
</ion-tab>
<tab title="Info" icon="ion-information-circled">
<view title="'Information'">
<content has-header="true" has-tabs="true" padding="true">
<ion-tab title="Info" icon="ion-information-circled">
<ion-view title="'Information'">
<ion-content has-header="true" has-tabs="true" padding="true">
<h3>Information</h3>
<p>
This is a sample seed project for the Ionic Framework. Please change it to match your needs.
@@ -125,25 +125,25 @@
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</content>
</view>
</tab>
</ion-content>
</ion-view>
</ion-tab>
<tab title="Sign-Out" icon="ion-log-out" href="#/sign-in">
</tab>
<ion-tab title="Sign-Out" icon="ion-log-out" href="#/sign-in">
</ion-tab>
</tabs>
</ion-tabs>
</script>
<script id="auto-list.html" type="text/ng-template">
<view title="'Auto List'">
<content has-header="true" has-tabs="true">
<list>
<item ng-repeat="auto in autos" ng-href="#/tabs/autos/{{ $index }}">
<ion-view title="'Auto List'">
<ion-content has-header="true" has-tabs="true">
<ion-list>
<ion-item ng-repeat="auto in autos" ng-href="#/tabs/autos/{{ $index }}">
{{ auto.year }} {{ auto.make }} {{ auto.model }}
</item>
</list>
</ion-item>
</ion-list>
<p>
<button ng-click="testStateGo()">Test State Go</button>
</p>
@@ -152,13 +152,13 @@
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script id="auto-detail.html" type="text/ng-template">
<view title="'Auto Details'">
<content has-header="true" has-tabs="true" padding="true">
<ion-view title="'Auto Details'">
<ion-content has-header="true" has-tabs="true" padding="true">
<h2>{{ auto.year }} {{ auto.make }} {{ auto.model }}</h2>
<p ng-bind="auto.desc"></p>
<p><a class="button" ng-href="{{ auto.url }}">Read More</a></p>
@@ -189,13 +189,13 @@
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script id="add-auto.html" type="text/ng-template">
<view title="'Add Auto'">
<content has-header="true" has-tabs="true">
<ion-view title="'Add Auto'">
<ion-content has-header="true" has-tabs="true">
<div class="list">
<label class="item item-input">
@@ -219,21 +219,21 @@
Forward View: {{ $viewHistory.forwardView }}
</p>
</div>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script id="about.html" type="text/ng-template">
<view title="'About'">
<content has-header="true" has-tabs="true" padding="true">
<ion-view title="'About'">
<ion-content has-header="true" has-tabs="true" padding="true">
<h3>About this app!</h3>
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</content>
</view>
</ion-content>
</ion-view>
</script>
<script>