Posted over 2 years ago. Visible to the public.

Angular with haml: Dynamic html classes

A haml angular 1 template with

Copy
.thing(class="is-{{:: item.type }}")

will be compiled (by haml) to

Copy
<div class="is-{{:: item.type thing }}"></div>

which is not what you want! It will also crash in angular (unless thing is a valid variable in your angular directive) with Error: [$parse:syntax] Syntax Error: Token 'thing' is an unexpected token at column 11 of the expression [item.type thing]

Solution 1: Use ng-class instead of class

Copy
.thing(ng-class='"is-{{ item.type }}"')

Solution 2: Don't let haml build the class statement:

Copy
%div(class="thing is-{{ item.type }}")

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Judith Roth
Last edit:
over 2 years ago
by Judith Roth
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Judith Roth to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more