Using an empty AngularStrap attribute with Slim

Question

I'd like to use the Angularstrap styling for . However, I'm having trouble figuring out how to use the "bs-select" option in slim.

This is the format in normal html

<button type="button" class="btn btn-default" ng-model="selectedIcon" 
 data-html="1" ng-options="icon.value as icon.label for icon in icons" bs-select>
  Action <span class="caret"></span>
</button>

And this is what it would look like in slim:

button.btn.btn-default type="button" ng-model="selectedIcon" data-html="1" 
ng-options="icon.value as icon.label for icon in icons" bs-select
  | Action
  span class="caret"

Because the bs-select attribute doesn't "=" something. It shows up as button text instead of creating a select dropdown.

Answer 1

Solution

<button bs-select> is actually equivalent to <button bs-select="bs-select">, but <button bs-select="">would be fine as well.

To get this in slim, try the following:

button[bs-select]

or

button bs-select=""

Reference:

http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes

Dealing with parenthesis from angular in slim

To mark attributes, different kinds of parenthesis are allowed by default: (), [], {} or none

It makes sense to remove curly brackets, because it collides with the angular syntax in:

h2 {{article.title}}

Here, slim will interpret {article.title} as an attribute and will afaik throw an error.

So better configure slim like this:

:attr_delims => {'(' => ')', '[' => ']'}, # removed '{' => '}' from default