Angular ui-router variable in nested view

Question

I'm currently working on an app where I have multiple nested views, they sort of look like this:

- ui-view 
  - ui-view="header"
  - ui-view="nav"
  - ui-view="body"

My states are defined as follows:

.state('index', {
   url: '', // default route
   templateUrl: 'welcome.html'
})
.state('app', {
    abstract: true,
    templateUrl: 'app.template.html' // This template contains the 3 different ui-views
})

// I'm using a different state here so I can set the navigation and header by default
.state('in-app', { 
    parent: 'app',
    abstract: true,
    views: {
       'nav@app': { '...' },
       'header@app': { '...' }
    }
})

// In-app routes
.state('dashboard', {
     parent: 'in-app',
     url: '/app/dashboard'
     views: {
         'body@app': { '...' }
    }
})
.state('users', {
     parent: 'in-app',
     url: '/app/users'
     views: {
         'body@app': { '...' }
    }
})
.state('settings', {
     parent: 'in-app',
     url: '/app/settings'
     views: {
         'body@app': { '...' }
    }
})

At the moment this works great, but for the in-app routes I would like to define a title that is displayed in the header@app view.
What would be the best way to do this? At the moment I can only think of either setting a variable on the $rootScope, or sending out an event. But for both of those I would need a controller.

Is there a way I could do this directly from my routes config?

Radim Köhler · Accepted Answer · 2014-11-14 03:41:44Z

2

The sample applicaiton of the UI-Router, uses this code:

ui-router / sample / app / app.js

.run(
[ '$rootScope', '$state', '$stateParams',
    function ($rootScope, $state, $stateParams) {
    // It's very handy to add references to $state and $stateParams to the $rootScope
    // so that you can access them from any scope within your applications.For example,
    // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
    // to active whenever 'contacts.list' or one of its decendents is active.
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

And that means, that with data : {} feature:

Attach Custom Data to State Objects

You can attach custom data to the state object (we recommend using a data property to avoid conflicts).

// Example shows an object-based state and a string-based state
var contacts = { 
    name: 'contacts',
    templateUrl: 'contacts.html',
    data: {
        customData1: 5,
        customData2: "blue"
    }  
}

we can do this:

.state('in-app', { 
    parent: 'app',
    abstract: true,
    views: {
       'nav@app': { '...' },
       'header@app': { '...' }
    }
    data: { title : "my title" },
})

And use it in some template like:

<div>{{$state.current.data.title}}</div>

Some summary.

We can place state and params into $rootScope, so we can access it without any controller anyhwere.
We can declare some more custom stuff via data and use it as a title ... anyhwere

answered Nov 14, 2014 at 3:41

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

woutr_be Over a year ago

Thanks, seems I didn't properly read the docs about this, this was exactly what I was looking for!

Radim Köhler Over a year ago

Great to see that, sir! UI-Router is bloody fantastic tool ;)

woutr_be Over a year ago

Yes it is! I can't believe something essential as this isn't done by default in Angular. Once you go ui-router, you can't go back.

Eric Mitjans Over a year ago

@RadimKöhler that's great! Any chance to pass it to a factory to make, for example, an http call search using this title variable?

Collectives™ on Stack Overflow

Angular ui-router variable in nested view

1 Answer 1

ui-router / sample / app / app.js

Attach Custom Data to State Objects

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related