Richard Kho Richard Kho - 4 months ago 11
AngularJS Question

Linking an Angular directive attribute to its template as a class with Jade

I'm trying to pass my custom Angular directive an attribute in its markup and have that attribute be assigned as a class in one of the containers of that directive's template.

Here's how my input would look, in Jade:

.form-layout-group
short-text-input.item(label="Short Input Group", inputColumnsClass="short-text-2")


Here's the function that returns my directive:

function ShortTextInput (FormControlService) {
restrict: 'E',
replace: true,
require: ['^validationForm', '?ngModel', '^?formCollection'],
scope: {
inputColumnsClass: '@'
},
templateUrl: '/templates/input/shortTextInput/short-text-input.html',
link: FormControlService.link
})


In my template, I'm trying the following:

include ../../input/_input-mixins.jade

+WrapInputwithLabelAndErrorplaceholder
div.inner-icon
div(class="{{ inputColumnsClass }}")
+InputwithValidation.item


Unfortunately, I'm not able to get this columns class to show up and actually style the input in my preferred method. When I hardcode this class into my template, what I'm intending to do works just fine.

Any tips on how I should be approaching this?

Answer

It should be input-columns-class="short-text-2".

input-columns-class DOM attribute is normalized to inputColumnsClass camel-case form by $compile service, while inputColumnsClass DOM attribute is normalized to inputcolumnsclass.