ngRepeatばりのオレオレ記法でbemを楽に書けるようにしたライブラリです。
レポジトリ: ukyo/angular-simple-bem
Install and Setup
bower
bower install --save angular-simple-bem
angular.module('your-module', ['angular-simple-bem']);
npm
npm install --save angular-simple-bem
angular.module('your-module', [require('angular-simple-bem')]);
Usage
上: ソース、 下: 展開後
Nest block or element
__fooで親要素のブロックを辿ってネスト。
<div bem="block">
<div bem="__elem1">
<div bem="__elem2">nest block or element</div>
</div>
</div>
<div bem="block" class="block">
<div bem="__elem1" class="block__elem1">
<div bem="__elem2" class="block__elem1__elem2">nest block or element</div>
</div>
</div>
Modifier
いつも通り書けるが、--mod1,mod2のようにカンマ区切りで書ける。
<div bem="block--mod">
<div bem="__elem--mod1,mod2">modifier</div>
</div>
<div bem="block--mod" class="block block--mod">
<div bem="__elem--mod1,mod2" class="block__elem block__elem--mod1 block__elem--mod2">modifier</div>
</div>
Modifier with Binding
--key:value形式でvalueがtruthyなときだけmodifier付きクラスを付与。--::でone time binding。
<div ng-init="foo = true; bar = false;">
<div bem="block--mod1:foo,mod2:bar">modifier with binding</div>
<div bem="block--::mod1:foo,mod2:bar">modifier with one time binding</div>
</div>
<div ng-init="foo = true; bar = false;">
<div bem="block--mod1:foo,mod2:bar" class="block block--mod1">modifier with binding</div>
<div bem="block--::mod1:foo,mod2:bar" class="block block--mod1">modifier with one time binding</div>
</div>
Modifier with Expression
--(foo)でfooをangularのexpressionとして評価。--{key: value}のようにオブジェクト形式なときは括弧省略可。::でone time binding有効になるが、括弧内がどうせangularのexpressionなので--(::foo)でもOK。
<div ng-init="foo = {mod1: true}; bar = true;">
<div bem="block--(foo)">modifier with expression</div>
<div bem="block--::{mod2: bar}">modifier with expression(one time binding)</div>
</div>
<div ng-init="foo = {mod1: true}; bar = true;">
<div bem="block--(foo)" class="block block--mod1">modifier with expression</div>
<div bem="block--::{mod2: bar}" class="block block--mod2">modifier with expression(one time binding)</div>
</div>
Animation
ngAnimateでいうところの add, removeが使える。詳しくはAngularJS: API: ngAnimateを参照。
License
MIT License