Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit d6fe9c7

Browse files
wesleychowesleycho
committed
feat(rating): remove replace usage
- Remove `replace: true` usage BREAKING CHANGE: Due to the removal of `replace: true`, this results in a slight change to the HTML structure - see the documentation examples to see it in action. Closes #5998
1 parent 7518821 commit d6fe9c7

File tree

3 files changed

+51
-38
lines changed

3 files changed

+51
-38
lines changed

‎src/rating/docs/demo.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div ng-controller="RatingDemoCtrl">
22
<h4>Default</h4>
3-
<uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
3+
<span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span>
44
<span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
55

66
<pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
@@ -10,6 +10,6 @@ <h4>Default</h4>
1010
<hr />
1111

1212
<h4>Custom icons</h4>
13-
<div ng-init="x = 5"><uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></uib-rating> <b>(<i>Rate:</i> {{x}})</b></div>
14-
<div ng-init="y = 2"><uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></uib-rating> <b>(<i>Rate:</i> {{y}})</b></div>
13+
<div ng-init="x = 5"><span uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></span> <b>(<i>Rate:</i> {{x}})</b></div>
14+
<div ng-init="y = 2"><span uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></span> <b>(<i>Rate:</i> {{y}})</b></div>
1515
</div>

‎src/rating/rating.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ angular.module('ui.bootstrap.rating', [])
55
stateOn: null,
66
stateOff: null,
77
enableReset: true,
8-
titles : ['one', 'two', 'three', 'four', 'five']
8+
titles: ['one', 'two', 'three', 'four', 'five']
99
})
1010

1111
.controller('UibRatingController', ['$scope', '$attrs', 'uibRatingConfig', function($scope, $attrs, ratingConfig) {
@@ -90,14 +90,14 @@ angular.module('ui.bootstrap.rating', [])
9090
.directive('uibRating', function() {
9191
return {
9292
require: ['uibRating', 'ngModel'],
93+
restrict: 'A',
9394
scope: {
9495
readonly: '=?readOnly',
9596
onHover: '&',
9697
onLeave: '&'
9798
},
9899
controller: 'UibRatingController',
99100
templateUrl: 'uib/template/rating/rating.html',
100-
replace: true,
101101
link: function(scope, element, attrs, ctrls) {
102102
var ratingCtrl = ctrls[0], ngModelCtrl = ctrls[1];
103103
ratingCtrl.init(ngModelCtrl);

‎src/rating/test/rating.spec.js‎

Lines changed: 46 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
describe('rating directive', function() {
2-
var $rootScope, $compile, element;
2+
var $rootScope, $compile, element, innerElem;
33
beforeEach(module('ui.bootstrap.rating'));
44
beforeEach(module('uib/template/rating/rating.html'));
55
beforeEach(inject(function(_$compile_, _$rootScope_) {
66
$compile = _$compile_;
77
$rootScope = _$rootScope_;
88
$rootScope.rate = 3;
9-
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
9+
element = $compile('<span uib-rating ng-model="rate"></span>')($rootScope);
1010
$rootScope.$digest();
11+
innerElem = element.children().eq(0);
1112
}));
1213

1314
function getStars() {
14-
return element.find('i');
15+
return innerElem.find('i');
1516
}
1617

1718
function getStar(number) {
@@ -38,37 +39,37 @@ describe('rating directive', function() {
3839
function triggerKeyDown(keyCode) {
3940
var e = $.Event('keydown');
4041
e.which = keyCode;
41-
element.trigger(e);
42+
innerElem.trigger(e);
4243
}
4344

4445
it('contains the default number of icons', function() {
4546
expect(getStars().length).toBe(5);
46-
expect(element.attr('aria-valuemax')).toBe('5');
47+
expect(innerElem.attr('aria-valuemax')).toBe('5');
4748
});
4849

4950
it('initializes the default star icons as selected', function() {
5051
expect(getState()).toEqual([true, true, true, false, false]);
51-
expect(element.attr('aria-valuenow')).toBe('3');
52+
expect(innerElem.attr('aria-valuenow')).toBe('3');
5253
});
5354

5455
it('handles correctly the click event', function() {
5556
getStar(2).click();
5657
$rootScope.$digest();
5758
expect(getState()).toEqual([true, true, false, false, false]);
5859
expect($rootScope.rate).toBe(2);
59-
expect(element.attr('aria-valuenow')).toBe('2');
60+
expect(innerElem.attr('aria-valuenow')).toBe('2');
6061

6162
getStar(5).click();
6263
$rootScope.$digest();
6364
expect(getState()).toEqual([true, true, true, true, true]);
6465
expect($rootScope.rate).toBe(5);
65-
expect(element.attr('aria-valuenow')).toBe('5');
66+
expect(innerElem.attr('aria-valuenow')).toBe('5');
6667

6768
getStar(5).click();
6869
$rootScope.$digest();
6970
expect(getState()).toEqual([false, false, false, false, false]);
7071
expect($rootScope.rate).toBe(0);
71-
expect(element.attr('aria-valuenow')).toBe('0');
72+
expect(innerElem.attr('aria-valuenow')).toBe('0');
7273
});
7374

7475
it('handles correctly the hover event', function() {
@@ -82,7 +83,7 @@ describe('rating directive', function() {
8283
expect(getState()).toEqual([true, true, true, true, true]);
8384
expect($rootScope.rate).toBe(3);
8485

85-
element.trigger('mouseout');
86+
innerElem.trigger('mouseout');
8687
expect(getState()).toEqual([true, true, true, false, false]);
8788
expect($rootScope.rate).toBe(3);
8889
});
@@ -92,44 +93,47 @@ describe('rating directive', function() {
9293
$rootScope.$digest();
9394

9495
expect(getState()).toEqual([true, true, false, false, false]);
95-
expect(element.attr('aria-valuenow')).toBe('2');
96+
expect(innerElem.attr('aria-valuenow')).toBe('2');
9697

9798
$rootScope.rate = 2.5;
9899
$rootScope.$digest();
99100

100101
expect(getState()).toEqual([true, true, true, false, false]);
101-
expect(element.attr('aria-valuenow')).toBe('3');
102+
expect(innerElem.attr('aria-valuenow')).toBe('3');
102103
});
103104

104105
it('changes the number of selected icons when value changes', function() {
105106
$rootScope.rate = 2;
106107
$rootScope.$digest();
107108

108109
expect(getState()).toEqual([true, true, false, false, false]);
109-
expect(element.attr('aria-valuenow')).toBe('2');
110-
expect(element.attr('aria-valuetext')).toBe('two');
110+
expect(innerElem.attr('aria-valuenow')).toBe('2');
111+
expect(innerElem.attr('aria-valuetext')).toBe('two');
111112
});
112113

113114
it('shows different number of icons when `max` attribute is set', function() {
114-
element = $compile('<uib-rating ng-model="rate" max="7"></uib-rating>')($rootScope);
115+
element = $compile('<span uib-rating ng-model="rate" max="7"></span>')($rootScope);
115116
$rootScope.$digest();
117+
innerElem = element.children().eq(0);
116118

117119
expect(getStars().length).toBe(7);
118-
expect(element.attr('aria-valuemax')).toBe('7');
120+
expect(innerElem.attr('aria-valuemax')).toBe('7');
119121
});
120122

121123
it('shows different number of icons when `max` attribute is from scope variable', function() {
122124
$rootScope.max = 15;
123-
element = $compile('<uib-rating ng-model="rate" max="max"></uib-rating>')($rootScope);
125+
element = $compile('<span uib-rating ng-model="rate" max="max"></span>')($rootScope);
124126
$rootScope.$digest();
127+
innerElem = element.children().eq(0);
125128
expect(getStars().length).toBe(15);
126-
expect(element.attr('aria-valuemax')).toBe('15');
129+
expect(innerElem.attr('aria-valuemax')).toBe('15');
127130
});
128131

129132
it('handles read-only attribute', function() {
130133
$rootScope.isReadonly = true;
131-
element = $compile('<uib-rating ng-model="rate" read-only="isReadonly"></uib-rating>')($rootScope);
134+
element = $compile('<span uib-rating ng-model="rate" read-only="isReadonly"></span>')($rootScope);
132135
$rootScope.$digest();
136+
innerElem = element.children().eq(0);
133137

134138
expect(getState()).toEqual([true, true, true, false, false]);
135139

@@ -148,8 +152,9 @@ describe('rating directive', function() {
148152

149153
it('handles enable-reset attribute', function() {
150154
$rootScope.canReset = false;
151-
element = $compile('<uib-rating ng-model="rate" enable-reset="canReset"></uib-rating>')($rootScope);
155+
element = $compile('<span uib-rating ng-model="rate" enable-reset="canReset"></span>')($rootScope);
152156
$rootScope.$digest();
157+
innerElem = element.children().eq(0);
153158

154159
var star = {
155160
states: [true, true, true, true, true],
@@ -162,19 +167,20 @@ describe('rating directive', function() {
162167
$rootScope.$digest();
163168
expect(getState()).toEqual(star.states);
164169
expect($rootScope.rate).toBe(5);
165-
expect(element.attr('aria-valuenow')).toBe('5');
170+
expect(innerElem.attr('aria-valuenow')).toBe('5');
166171

167172
selectStar.click();
168173
$rootScope.$digest();
169174
expect(getState()).toEqual(star.states);
170175
expect($rootScope.rate).toBe(5);
171-
expect(element.attr('aria-valuenow')).toBe('5');
176+
expect(innerElem.attr('aria-valuenow')).toBe('5');
172177
});
173178

174179
it('should fire onHover', function() {
175180
$rootScope.hoveringOver = jasmine.createSpy('hoveringOver');
176-
element = $compile('<uib-rating ng-model="rate" on-hover="hoveringOver(value)"></uib-rating>')($rootScope);
181+
element = $compile('<span uib-rating ng-model="rate" on-hover="hoveringOver(value)"></span>')($rootScope);
177182
$rootScope.$digest();
183+
innerElem = element.children().eq(0);
178184

179185
getStar(3).trigger('mouseover');
180186
$rootScope.$digest();
@@ -183,10 +189,11 @@ describe('rating directive', function() {
183189

184190
it('should fire onLeave', function() {
185191
$rootScope.leaving = jasmine.createSpy('leaving');
186-
element = $compile('<uib-rating ng-model="rate" on-leave="leaving()"></uib-rating>')($rootScope);
192+
element = $compile('<span uib-rating ng-model="rate" on-leave="leaving()"></span>')($rootScope);
187193
$rootScope.$digest();
194+
innerElem = element.children().eq(0);
188195

189-
element.trigger('mouseleave');
196+
innerElem.trigger('mouseleave');
190197
$rootScope.$digest();
191198
expect($rootScope.leaving).toHaveBeenCalled();
192199
});
@@ -243,8 +250,9 @@ describe('rating directive', function() {
243250
beforeEach(inject(function() {
244251
$rootScope.classOn = 'icon-ok-sign';
245252
$rootScope.classOff = 'icon-ok-circle';
246-
element = $compile('<uib-rating ng-model="rate" state-on="classOn" state-off="classOff"></uib-rating>')($rootScope);
253+
element = $compile('<span uib-rating ng-model="rate" state-on="classOn" state-off="classOff"></span>')($rootScope);
247254
$rootScope.$digest();
255+
innerElem = element.children().eq(0);
248256
}));
249257

250258
it('changes the default icons', function() {
@@ -260,13 +268,14 @@ describe('rating directive', function() {
260268
{stateOn: 'heart'},
261269
{stateOff: 'off'}
262270
];
263-
element = $compile('<uib-rating ng-model="rate" rating-states="states"></uib-rating>')($rootScope);
271+
element = $compile('<span uib-rating ng-model="rate" rating-states="states"></span>')($rootScope);
264272
$rootScope.$digest();
273+
innerElem = element.children().eq(0);
265274
}));
266275

267276
it('should define number of icon elements', function() {
268277
expect(getStars().length).toBe(4);
269-
expect(element.attr('aria-valuemax')).toBe('4');
278+
expect(innerElem.attr('aria-valuemax')).toBe('4');
270279
});
271280

272281
it('handles each icon', function() {
@@ -291,8 +300,9 @@ describe('rating directive', function() {
291300
uibRatingConfig.max = 10;
292301
uibRatingConfig.stateOn = 'on';
293302
uibRatingConfig.stateOff = 'off';
294-
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
303+
element = $compile('<span uib-rating ng-model="rate"></span>')($rootScope);
295304
$rootScope.$digest();
305+
innerElem = element.children().eq(0);
296306
}));
297307
afterEach(inject(function(uibRatingConfig) {
298308
// return it to the original state
@@ -320,8 +330,9 @@ describe('rating directive', function() {
320330
$rootScope.rate = 5;
321331
angular.extend(originalConfig, uibRatingConfig);
322332
uibRatingConfig.max = 10;
323-
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
333+
element = $compile('<span uib-rating ng-model="rate"></span>')($rootScope);
324334
$rootScope.$digest();
335+
innerElem = element.children().eq(0);
325336
}));
326337
afterEach(inject(function(uibRatingConfig) {
327338
// return it to the original state
@@ -336,18 +347,20 @@ describe('rating directive', function() {
336347
describe('shows custom titles ', function() {
337348
it('should return the custom title for each star', function() {
338349
$rootScope.titles = [44,45,46];
339-
element = $compile('<uib-rating ng-model="rate" titles="titles"></uib-rating>')($rootScope);
350+
element = $compile('<span uib-rating ng-model="rate" titles="titles"></span>')($rootScope);
340351
$rootScope.$digest();
352+
innerElem = element.children().eq(0);
341353
expect(getTitles()).toEqual(['44', '45', '46', '4', '5']);
342354
});
343355
it('should return the default title if the custom title is empty', function() {
344356
$rootScope.titles = [];
345-
element = $compile('<uib-rating ng-model="rate" titles="titles"></uib-rating>')($rootScope);
357+
element = $compile('<span uib-rating ng-model="rate" titles="titles"></span>')($rootScope);
346358
$rootScope.$digest();
359+
innerElem = element.children().eq(0);
347360
expect(getTitles()).toEqual(['one', 'two', 'three', 'four', 'five']);
348361
});
349362
it('should return the default title if the custom title is not an array', function() {
350-
element = $compile('<uib-rating ng-model="rate" titles="test"></uib-rating>')($rootScope);
363+
element = $compile('<span uib-rating ng-model="rate" titles="test"></span>')($rootScope);
351364
$rootScope.$digest();
352365
expect(getTitles()).toEqual(['one', 'two', 'three', 'four', 'five']);
353366
});

0 commit comments

Comments
 (0)