作った(demo)。

モチベーション

bemとか書くの面倒すぎだろうが。

使い方

これが

<div bem="block--foo,bar">
  <div bem="__element--mod">
    <div bem="__a--mo">a</div>
    <div bem="__b">b</div>
  </div>
</div>

こうなる。

<div bem="block--foo,bar" class="block block--foo block--bar">
  <div bem="__element--mod" class="block__element block__element--mod">
    <div bem="__a--mo" class="block__element__a block__element__a--mo">a</div>
    <div bem="__b" class="block__element__b">b</div>
  </div>
</div>

実装

app.directive('bem', () => {
  function Ctrl($element, $attrs) {
    var match = $attrs.bem.trim().match(/^(.*?)(?:--(.*))?$/);
    if (!match) throw new Error('bem: invalid pattern');
    var modifiers = match[2] ? match[2].split(',') : [];
    this.be = /^__/.test(match[1]) ?
      $element.parent().controller('bem').be + match[1] : match[1];
    $element.addClass([this.be].concat(modifiers.map(m => `${this.be}--${m}`)).join(' '));
  }
  
  return {
    restrict: 'A',
    controller: Ctrl
  };
});

参考