diff --git a/modules/angular2/src/render/dom/compiler/directive_parser.js b/modules/angular2/src/render/dom/compiler/directive_parser.js
index 7114dcacae37..4336d2378e72 100644
--- a/modules/angular2/src/render/dom/compiler/directive_parser.js
+++ b/modules/angular2/src/render/dom/compiler/directive_parser.js
@@ -85,9 +85,7 @@ export class DirectiveParser extends CompileStep {
}
if (isPresent(directive.hostAttributes)) {
MapWrapper.forEach(directive.hostAttributes, (hostAttrValue, hostAttrName) => {
- if (!DOM.hasAttribute(current.element, hostAttrName)) {
- DOM.setAttribute(current.element, hostAttrName, hostAttrValue);
- }
+ this._addHostAttribute(hostAttrName, hostAttrValue, current);
});
}
if (isPresent(directive.readAttributes)) {
@@ -154,6 +152,16 @@ export class DirectiveParser extends CompileStep {
directiveBinderBuilder.bindHostProperty(hostPropertyName, ast);
}
+ _addHostAttribute(attrName, attrValue, compileElement) {
+ if (StringWrapper.equals(attrName, 'class')) {
+ ListWrapper.forEach(attrValue.split(' '), (className) => {
+ DOM.addClass(compileElement.element, className);
+ });
+ } else if (!DOM.hasAttribute(compileElement.element, attrName)) {
+ DOM.setAttribute(compileElement.element, attrName, attrValue);
+ }
+ }
+
_splitBindConfig(bindConfig:string) {
return ListWrapper.map(bindConfig.split('|'), (s) => s.trim());
}
diff --git a/modules/angular2/test/render/dom/compiler/directive_parser_spec.js b/modules/angular2/test/render/dom/compiler/directive_parser_spec.js
index b751977da6de..7ce6b77497fc 100644
--- a/modules/angular2/test/render/dom/compiler/directive_parser_spec.js
+++ b/modules/angular2/test/render/dom/compiler/directive_parser_spec.js
@@ -144,6 +144,15 @@ export function main() {
expect(DOM.getAttribute(results[0].element, 'attr_name')).toEqual('attr_val');
});
+ it('should add CSS classes if "class" specified in host element attributes', () => {
+ var element = el('');
+ var results = process(element);
+
+ expect(DOM.hasClass(results[0].element, 'foo')).toBeTruthy();
+ expect(DOM.hasClass(results[0].element, 'bar')).toBeTruthy();
+ expect(DOM.hasClass(results[0].element, 'baz')).toBeTruthy();
+ });
+
it('should read attribute values', () => {
var element = el('');
var results = process(element);
@@ -274,7 +283,8 @@ var someDirectiveWithHostProperties = new DirectiveMetadata({
var someDirectiveWithHostAttributes = new DirectiveMetadata({
selector: '[some-decor-with-host-attrs]',
hostAttributes: MapWrapper.createFromStringMap({
- 'attr_name': 'attr_val'
+ 'attr_name': 'attr_val',
+ 'class': 'foo bar'
})
});
@@ -303,4 +313,4 @@ var componentWithNonElementSelector = new DirectiveMetadata({
id: 'componentWithNonElementSelector',
selector: '[attr]',
type: DirectiveMetadata.COMPONENT_TYPE
-});
\ No newline at end of file
+});