Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 7ec8a89

Browse files
Di PengIgorMinar
Di Peng
authored andcommitted
fix(directives): make ng:class-even/odd work with ng:class
Closes #508
1 parent 34f1740 commit 7ec8a89

File tree

2 files changed

+47
-0
lines changed

2 files changed

+47
-0
lines changed

src/directives.js

+3
Original file line numberDiff line numberDiff line change
@@ -546,8 +546,11 @@ function ngClass(selector) {
546546
return function(element) {
547547
this.$watch(function(scope) {
548548
if (selector(scope.$index)) {
549+
var ngClassVal = scope.$eval(element.attr('ng:class'));
550+
if (isArray(ngClassVal)) ngClassVal = ngClassVal.join(' ');
549551
var value = scope.$eval(expression);
550552
if (isArray(value)) value = value.join(' ');
553+
if (ngClassVal && ngClassVal !== value) value = value + ' ' + ngClassVal;
551554
element[0].className = trim(existing + value);
552555
}
553556
});

test/directivesSpec.js

+44
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,50 @@ describe("directive", function(){
217217
expect(e2.hasClass('even')).toBeTruthy();
218218
});
219219

220+
221+
it('should allow both ng:class and ng:class-odd/even on the same element', function() {
222+
var scope = compile('<ul>' +
223+
'<li ng:repeat="i in [0,1]" ng:class="\'plainClass\'" ' +
224+
'ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li>' +
225+
'<ul>');
226+
scope.$apply();
227+
var e1 = jqLite(element[0].childNodes[1]);
228+
var e2 = jqLite(element[0].childNodes[2]);
229+
230+
expect(e1.hasClass('plainClass')).toBeTruthy();
231+
expect(e1.hasClass('odd')).toBeTruthy();
232+
expect(e1.hasClass('even')).toBeFalsy();
233+
expect(e2.hasClass('plainClass')).toBeTruthy();
234+
expect(e2.hasClass('even')).toBeTruthy();
235+
expect(e2.hasClass('odd')).toBeFalsy();
236+
});
237+
238+
239+
it('should allow both ng:class and ng:class-odd/even with multiple classes', function() {
240+
var scope = compile('<ul>' +
241+
'<li ng:repeat="i in [0,1]" ng:class="[\'A\', \'B\']" ' +
242+
'ng:class-odd="[\'C\', \'D\']" ng:class-even="[\'E\', \'F\']"></li>' +
243+
'<ul>');
244+
scope.$apply();
245+
var e1 = jqLite(element[0].childNodes[1]);
246+
var e2 = jqLite(element[0].childNodes[2]);
247+
248+
expect(e1.hasClass('A')).toBeTruthy();
249+
expect(e1.hasClass('B')).toBeTruthy();
250+
expect(e1.hasClass('C')).toBeTruthy();
251+
expect(e1.hasClass('D')).toBeTruthy();
252+
expect(e1.hasClass('E')).toBeFalsy();
253+
expect(e1.hasClass('F')).toBeFalsy();
254+
255+
expect(e2.hasClass('A')).toBeTruthy();
256+
expect(e2.hasClass('B')).toBeTruthy();
257+
expect(e2.hasClass('E')).toBeTruthy();
258+
expect(e2.hasClass('F')).toBeTruthy();
259+
expect(e2.hasClass('C')).toBeFalsy();
260+
expect(e2.hasClass('D')).toBeFalsy();
261+
});
262+
263+
220264
describe('ng:style', function(){
221265
it('should set', function(){
222266
var scope = compile('<div ng:style="{height: \'40px\'}"></div>');

0 commit comments

Comments
 (0)