A set of directives to simplify your workflow with BEM-markup in AngularJS applications.
- New mod-once attribute to bind modifiers without watchers. Note that there is no sense or capability to use
modandmod-onceattributes simultaneously on a single node. - New bemConfigProvider with following API:
- #setSeparators(el, mod, value) - Specify class separators for your own syntax approach.
- #ignoreValues(bool) - If it's true then no value will add to the modifier class name. Use it if you don't need values in your markup and tired of having to write
!!before modifier values. Default value isfalse. - setModCase(modCase) - Specify modifier name case. Use it if you have different naming approach. Posible values:
kebab,snake,camel. If you will use the last option the modifier name will not be changed at all. Default value iskebab.
- New braces-free syntax
- Automatic one-time bindings without additional syntax
- Performance improvements
- New tests
- 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
- Improved performance.
- Default syntax changed.
block__elem--mod-value modcan now accept array and string withspacedelimiter
$ bower install angular-bemor
$ npm install angular-bem@^1Include 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"></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>Of course there is a support for conditional modifiers:
<div block="my-block" mod="disabled: $ctrl.isDisabled"></div>Note that if you use only mod names in mod attribute (without values) then no watchers will be created on this node by angular-bem.
<body ng-app="app">
<div block="my-block" mod="modName"></div>
</body>Use mod-once attribute instead of mod to prevent watcher creation.
<body ng-app="app">
<div block="my-block" mod-once="modName: $ctrl.model.modName"></div>
</body>Create your own BEM-like syntax:
app.config(function(bemConfigProvider) {
bemConfigProvider.setSeparators('--', '__', '_');
});Now output of previous example will look like:
<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>If you don't use values in your markup and tired of having to write !! before modifier values you can easily disable value addition.
app.config(function(bemConfigProvider) {
bemConfigProvider.ignoreValues();
});By default modifer name will be converted to kabeb case after rendering but you can change it to 'snake' or 'camel' if you use different naming approach. camel option will disable transformation at all.
app.config(function(bemConfigProvider) {
bemConfigProvider.setModCase('snake');
});- These directives don't affect scope or other directives. So you can use them at ease wherever you want.
- You can only specify one element or block on single node. This limitation greatly simplify code of module and your app.
- There is no way to create an element of parent block inside nested block. It's not a component-way. So please avoid it.