Negligible Participation Metric


    1.0.0 • Public • Published


    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.


    → 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){
            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

    option values default role
    class true/false true Adds a class on directive.
    attr true/false false Adds attribute on directive.
    id true/false false Adds id attribute on directive.
    classPrepend String 'stater-' Name of the class to start with. class name will be classPrepend + state name. e.g. 'stater-photos-cats' for photos.cats state name.
    attrName String 'stater' Name of the attribute. attribute's value will be state name. e.g. stater='photos-cats' for photos.cats state name.
    idPrepend String 'stater-' Value of the id attribute to start with. id's value will be idPrepend + state name. e.g. id='starter-photos-cats' for photos.cats state name.
    replaceDot true/false true Replaces dot(.) with hyphen (-) in output value class, attribute or id

    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.


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

    state-name output
    dashboard <ui-view ui-stater class="custom-stater-dashboard" custom-stater="dashboard" id="custom-stater-dashboard" <ui-view ui-stater class="custom-stater-dashboard" custom-stater="dashboard-photos" id="custom-stater-dashboard-photos" <ui-view ui-stater class="custom-stater-dashboard-cats" custom-stater="dashboard-photos-cats" id="custom-stater-dashboard-photos-cats"

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




    npm i ui-stater

    DownloadsWeekly Downloads






    Last publish


    • thatisuday