Angular custom data to state objects

Question

I'm following this sample on adding custom data to state objects but can't figure out what I'm doing wrong.

The idea is to have a Users state with a template that have 3 views: header, content and footer. The header-view gets updated with the child state's title and breadcrumb. The unnamed content-view will show the child's template (like a users list) and the footer will show summary data.

I have 2 issues:

My custom data object on my header's current state is undefined. ['Cannot read property 'title' of undefined]
If I exclude the custom data and just set the $scope values directly in the controller, it works fine but now get a 404 error. [GET http://localhost:3000/users 404 (Not Found)]. This makes no sense to me.

Am I on the right track with what I want to do? I'm unsure if I need the custom data or can I just set it in the controller?

angular.module('users').config(['$stateProvider',
    function($stateProvider) {

        // Users state routing
        $stateProvider
        .state('users', {

            onEnter: function(){
              console.log('state change to users');
            },

            abstract: true,
            url: '/users', 
            views: {
                '': {
                    templateUrl: 'modules/users/views/users.html'
                },                  
                'header@users': {
                    templateUrl: 'modules/core/views/page-header.html',
                    // data: {              //<- this is undefined in the controller
                    //  title: 'Users',                 
                    //  breadcrumb: 'Home / Users'
                    // },
                    controller: function($scope, $state) {
                        $scope.title = 'Users'; //$state.current.data.title;
                        $scope.breadcrumb = 'Home / Users'; //$state.current.data.breadcrumb;
                    }                   
                },
                'footer@users': {
                    templateUrl: 'modules/core/views/page-footer.html'
                }
            }           
        })

        .state('users.list', {
            onEnter: function(){
                console.log('state change to users.list');
            },  

            url: '',
            templateUrl: 'modules/users/views/users-list.html'
        })

        .state('signin', {
            url: '/signin',
            templateUrl: 'modules/users/views/authentication/signin.client.view.html'  
        });
    }
]);

<section>
  <div ui-view="header"></div>

  <div ui-view=""></div>

  <div ui-view="footer"></div>
</section>

scarlz · Accepted Answer · 2015-01-14 05:36:03Z

1

You're receiving undefined because you're trying to access a data object belonging to the state itself, rather than the view you've defined it on. Typically, data would be defined against the state, but if you wish to do so against the view, you will need to use:

views: {
   'header@users': {
      data: {
        title: 'Users',
      },
      controller: function($scope, $state) {
        $scope.title = $state.current.views['header@users'].data.title;
      }
   }
}

As for your 404 error, there is nothing presented in the code that would cause this, so the problem must lay elsewhere.

answered Jan 14, 2015 at 5:36

scarlz

2,5121 gold badge19 silver badges20 bronze badges

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

1 Comment

ceebreenk Over a year ago

Yes! Thanks for pointing that out. I now define my data against the state and it resolves correctly. I've also moved my views out of my abstract Users state into my child states as it gives me more control over what I show.

Collectives™ on Stack Overflow

Angular custom data to state objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related