ui-stater

ui-router helper directive to generate class, attribute or id field based on state name a ui-view directive posseses...

In a nutshell

ui-stater helps you add class or attribute or id field on ui-view directive, based on name of the state that element represents.

Just add ui-stater attribute on ui-view directive element.

For example, if below element is a template for ui-router state 'photos'

<ui-view ui-stater class="myclass"></ui-view> 

then, above element will mutate (because it has ui-stater attribute) into...

<ui-view ui-stater stater="photo" class="myclass stater-photo" id="stater-photo"></ui-view>

This is incredibly helpful for dom manipulation and css styling.

Install

→ Bower

bower install --save ui-stater

→ Manual

Download angularJS, ui-router and ui-stater and include angular.js, angular-ui-router.js and ui-stater.js files in your application.

Setup application

Include dependencies

var myApp = angular.module('myApp', ['ui.router', 'thatisuday.ui-stater']);

Set options

You can configure options of ui-stater using uiStaterOpsProvider to produce only few or all fields to provide ease.

var myApp.config(['uiStaterOpsProvider', function(uiStaterOpsProvider){
    uiStaterOpsProvider.setOptions({
        class : true,
        attr : true, 
        id : true,
        classPrepend : 'custom-stater-',
        attrName : 'custom-stater',
        idPrepend : 'custom-stater-',
        replaceDot : true
    });
}]);

These options will help you set custom value of class, attribute or id field (almost).

All options are mentioned below

Note that if the state name have dot (.) in it, then output will replace all (.) with hyphen (-). This is needed to be done so that output value will be a css selector. To turn this off, set replaceDot option to false.

Examples

So far, we have set our application, installed all dependencies and configured ui-stater.

Now I think, you probably got the hang of it.