diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js index f84d6dc704a..25bf14cb043 100644 --- a/js/ext/angular/src/directive/ionicTabBar.js +++ b/js/ext/angular/src/directive/ionicTabBar.js @@ -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>' }; }]); diff --git a/js/ext/angular/test/directive/ionicTabBar.unit.js b/js/ext/angular/test/directive/ionicTabBar.unit.js index 716f72d0527..1bdb4d35bae 100644 --- a/js/ext/angular/test/directive/ionicTabBar.unit.js +++ b/js/ext/angular/test/directive/ionicTabBar.unit.js @@ -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() { diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html index e2f2a695e89..37c1b944467 100644 --- a/js/ext/angular/test/tabs.html +++ b/js/ext/angular/test/tabs.html @@ -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>