angular-bem

A set of directives to simplify your workflow with BEM-markup in Angular-based applications.

Changelog

0.4.1

Add test coverage.
Add one-time binding syntax. (it looks like angular 1.3 one-time binding syntax but it's not the same)
Fix bugs

0.4.0

Improved performance.

0.3.0

Default syntax changed. block__elem--mod-value
mod can now accept array and string with space delimiter

Install

$ bower install angular-bem

$ npm install angular-bem

Example

Include this module to your app:

angular.module('app', ['tenphi.bem']);

Create a simple markup:

<body ng-app="app">
  <div block="my-block" mod="{ modName: 'value' }">
    <div elem="my-element" mod="{ modName: 'value', secondModName: true }"></div>
  </div>
</body>

It will be transformed into following markup:

<div class="my-block my-block--mod-name_value">
  <div class="my-block__my-element my-block__my-element--mod-name_value my-block__my-element--second-mod-name"></div>
</div>

One-time binding syntax

To activate it include double colon "::" at the beginning of mod attribute.

<body ng-app="app">
  <div block="my-block" mod="::{ modName: 'value' }"></div>
</body>

Works for angular>=1.2.0.

Do not confuse with angular 1.3 one-time binding syntax! It looks similar but it is not the same.

Customization

Create your own BEM-like syntax:

app.config(function(bemConfigProvider) {
  bemConfigProvider.generateClass = function generateClass(blockName, elemName, modName, modValue) {
    var cls = blockName;

    if (elemName != null) {
      cls += '--' + elemName;
    }

    if (modName != null) {
      cls = '~' + modName;
      if ((typeof(modValue) !== 'boolean' && modValue != null)) {
        cls += '-' + modValue;
      }
    }

    return cls;
  };
});

Now output of previous example will look like:

<div class="my-block ~mod-name-value">
  <div class="my-block--my-element ~mod-name-value ~second-mod-name"></div>
</div>

Need to know

These directives don't use isolated scope. So you can freely use them in various cases even in templates of directives with replace option.
You can only specify one element or block in one node. This limitation greatly simplify code of module and your app. Anyway this is BEM good practice so you should follow it.
There is no way to create an element of parent block inside nested block.

fabm22 / angular-bem