CODEWITHSUNDEEP
angularjsangularjs-directivepug
Richard Kho
Richard Kho

Reputation: 5286

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?

Upvotes: 1

Views: 92

Answers (1)

Estus Flask
Estus Flask

Reputation: 222513

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.

Upvotes: 2

Related Questions