Skip to content

Commit

Permalink
feat(ionic): prefix all directives with ion-
Browse files Browse the repository at this point in the history
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>
```
  • Loading branch information
ajoslin committed Feb 18, 2014
1 parent ec8862a commit 2c39a21
Show file tree
Hide file tree
Showing 58 changed files with 550 additions and 552 deletions.
2 changes: 1 addition & 1 deletion js/ext/angular/src/directive/ionicActionSheet.js
Expand Up @@ -3,7 +3,7 @@

angular.module('ionic.ui.actionSheet', [])

.directive('actionSheet', ['$document', function($document) {
.directive('ionActionSheet', ['$document', function($document) {
return {
restrict: 'E',
scope: true,
Expand Down
10 changes: 5 additions & 5 deletions js/ext/angular/src/directive/ionicBar.js
Expand Up @@ -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>',
Expand Down Expand Up @@ -66,7 +66,7 @@ angular.module('ionic.ui.header', ['ngAnimate'])
};
}])

.directive('footerBar', function() {
.directive('ionFooterBar', function() {
return {
restrict: 'E',
replace: true,
Expand Down
6 changes: 3 additions & 3 deletions js/ext/angular/src/directive/ionicBindHtml.js
@@ -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 || '');
});
};
Expand Down
2 changes: 1 addition & 1 deletion js/ext/angular/src/directive/ionicCheckbox.js
Expand Up @@ -4,7 +4,7 @@
angular.module('ionic.ui.checkbox', [])


.directive('checkbox', function() {
.directive('ionCheckbox', function() {
return {
restrict: 'E',
replace: true,
Expand Down
16 changes: 8 additions & 8 deletions js/ext/angular/src/directive/ionicContent.js
Expand Up @@ -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) {
Expand All @@ -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: '&',
Expand Down Expand Up @@ -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
};
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
10 changes: 5 additions & 5 deletions js/ext/angular/src/directive/ionicList.js
Expand Up @@ -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,

Expand All @@ -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>',

Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion js/ext/angular/src/directive/ionicLoading.js
Expand Up @@ -3,7 +3,7 @@

angular.module('ionic.ui.loading', [])

.directive('loading', function() {
.directive('ionLoading', function() {
return {
restrict: 'E',
replace: true,
Expand Down
8 changes: 4 additions & 4 deletions js/ext/angular/src/directive/ionicRadio.js
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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];
Expand Down
4 changes: 2 additions & 2 deletions js/ext/angular/src/directive/ionicScroll.js
Expand Up @@ -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,
Expand All @@ -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
};
Expand Down
10 changes: 5 additions & 5 deletions js/ext/angular/src/directive/ionicSideMenu.js
Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down Expand Up @@ -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,
Expand Down
12 changes: 6 additions & 6 deletions js/ext/angular/src/directive/ionicSlideBox.js
Expand Up @@ -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,
Expand Down Expand Up @@ -93,30 +93,30 @@ 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);
}
}
};
}])

.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) {};
},
};
})

.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) {
Expand Down
24 changes: 12 additions & 12 deletions js/ext/angular/src/directive/ionicTabBar.js
Expand Up @@ -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');
}])

Expand Down Expand Up @@ -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) {

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand All @@ -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);
Expand All @@ -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: '@',
Expand All @@ -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>'
};
}]);
Expand Down

0 comments on commit 2c39a21

Please sign in to comment.