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(tab): allow html in tab title attribute

Browse Source 
Closes #528
This commit is contained in:
Andy Joslin
2014-02-06 22:12:42 -05:00
parent 2d39418d0b
commit 0facb120c7
3 changed files with 33 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
angular.module('ionic.ui.tabs', ['ionic.service.view'])
angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
/**
* @description
@@ -93,7 +93,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
$scope.tabsController = this;
}],
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
compile: function(element, attr, transclude, tabsCtrl) {
@@ -245,8 +245,8 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
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" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
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" active="c.isVisible" index="$index" ng-repeat="c in controllers"></tab-controller-item>' +
'</div>',
link: function($scope, $element, $attr, tabsCtrl) {
$element.addClass($scope.tabsType);
@@ -274,17 +274,18 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
if(attrs.icon) {
scope.iconOn = scope.iconOff = attrs.icon;
}
scope.selectTab = function() {
tabsCtrl.select(scope.index, true);
};
},
template:
template:
'<a ng-class="{active:active, \'has-badge\':badge}" ng-click="selectTab()" class="tab-item">' +
'<i class="badge" ng-if="badge">{{badge}}</i>' +
'<i class="icon {{icon}}" ng-if="icon"></i>' +
'<i class="{{iconOn}}" ng-if="active"></i>' +
'<i class="{{iconOff}}" ng-if="!active"></i> {{iconTitle}}' +
'<i class="{{iconOff}}" ng-if="!active"></i>' +
'<span bind-html-unsafe="iconTitle"></span>' +
'</a>'
};
}]);

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

@@ -2,7 +2,7 @@ describe('Tab Bar Controller', function() {
var compile, element, scope, ctrl;
beforeEach(module('ionic.ui.tabs'));
beforeEach(inject(function($compile, $rootScope, $controller) {
compile = $compile;
scope = $rootScope;
@@ -63,20 +63,20 @@ describe('Tab Bar Controller', function() {
describe('Tabs directive', function() {
var compile, element, scope;
beforeEach(module('ionic.ui.tabs'));
beforeEach(inject(function($compile, $rootScope) {
compile = $compile;
scope = $rootScope;
}));
it('Has tab class', function() {
element = compile('<tabs></tabs>')(scope);
scope.$digest();
expect(element.find('.tabs').hasClass('tabs')).toBe(true);
});
it('Has tab children', function() {
element = compile('<tabs></tabs>')(scope);
scope = element.scope();
@@ -90,18 +90,18 @@ describe('Tabs directive', 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>' +
element = compile('<tabs>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'</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>' +
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);
scope.$digest();
var tabs = element[0].querySelector('.tabs');
@@ -110,9 +110,9 @@ describe('Tabs directive', 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>' +
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);
scope = element.scope();
scope.$digest();
@@ -129,7 +129,7 @@ describe('Tabs directive', function() {
describe('Tab Item directive', function() {
var compile, element, scope, ctrl;
beforeEach(module('ionic.ui.tabs'));
beforeEach(inject(function($compile, $rootScope, $document, $controller) {
@@ -138,23 +138,16 @@ describe('Tab Item directive', function() {
scope.badgeValue = 3;
element = compile('<tabs>' +
'<tab title="Item" icon="icon-default" badge="badgeValue"></tab>' +
'<tab title="Item" icon="icon-default" badge="badgeValue"></tab>' +
'</tabs>')(scope);
scope.$digest();
$document[0].body.appendChild(element[0]);
}));
it('Default text works', function() {
var title = '';
var a = element.find('a')[0];
for(i = 0, j = a.childNodes.length; i < j; i++) {
child = a.childNodes[i];
if (child.nodeName === "#text") {
title += child.nodeValue.trim();
}
}
expect(title).toEqual('Item');
it('Title works', function() {
//The badge's text gets in the way of just doing .text() on the element itself, so exclude it
var notBadge = angular.element(element[0].querySelectorAll('a >:not(.badge)'));
expect(notBadge.text().trim()).toEqual('Item');
});
it('Default icon works', function() {
@@ -189,7 +182,7 @@ describe('Tab Item directive', function() {
describe('Tab Controller Item directive', function() {
var compile, element, scope, ctrl;
beforeEach(module('ionic.ui.tabs'));
beforeEach(inject(function($compile, $rootScope, $document, $controller) {
@@ -198,24 +191,15 @@ describe('Tab Controller Item directive', function() {
scope.badgeValue = 3;
scope.isActive = false;
element = compile('<tabs class="tabs">' +
'<tab-controller-item icon-title="Icon title" icon="icon-class" icon-on="icon-on-class" icon-off="icon-off-class" badge="badgeValue" active="isActive" index="0"></tab-controller-item>' +
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" active="isActive" index="0"></tab-controller-item>' +
'</tabs>')(scope);
scope.$digest();
$document[0].body.appendChild(element[0]);
}));
it('Icon title works', function() {
var title = '';
var a = element.find('a')[0];
for(var i = 0, j = a.childNodes.length; i < j; i++) {
child = a.childNodes[i];
if (child.nodeName === "#text") {
title += child.nodeValue.trim();
}
}
expect(title).toEqual('Icon title');
it('Icon title works as html', function() {
expect(element.find('a').find('span').html()).toEqual('Icon <b>title</b>');
});
it('Icon classes works', function() {

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

@@ -58,7 +58,7 @@
tabs-style="tabs-top tabs-positive"
controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
<tab title="Tasks" icon-on="icon ion-ios7-filing" icon-off="icon ion-ios7-filing-outline" ng-controller="HomeCtrl">
<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>