Richard Kho Richard Kho - 6 months ago 17
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:

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',

In my template, I'm trying the following:

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

div(class="{{ inputColumnsClass }}")

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?


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.