angular-ui / ui-router

The de-facto solution to flexible routing with nested views in AngularJS
http://ui-router.github.io/
MIT License
13.54k stars 3k forks source link

Support: Child state does not update view #1968

Closed a-r-m-i-n closed 9 years ago

a-r-m-i-n commented 9 years ago

Hi, I have a problem and no idea. In this issue, there is an example about, how to use child states with resolves: https://github.com/angular-ui/ui-router/issues/1903#issuecomment-98198675

My states look like this:

$stateProvider
        .state('app', {
            url: '',
            abstract: true,
            templateUrl: helper.basepath('app.html'),
            controller: 'AppController',
            resolve: helper.resolveFor('fastclick', 'modernizr', 'icons', 'screenfull', 'animo', 'sparklines', 'slimscroll', 'classyloader', 'toaster', 'whirl')
        })
        .state('app.facility', {
            url: '/facility',
            templateUrl: helper.basepath('Facility/Index.html'),
            controller: 'FacilityController',
            resolve: {
                Facilities: ['Facility', function(Facility) {
                    return Facility.query().$promise;
                }]
            }
        })
        .state('app.facility.show', {
            url: '/:id',
            templateUrl: helper.basepath('Facility/Show.html'),
            controller: 'FacilityItemController',
            resolve: {
                Facility: ['Facility', '$stateParams', function(Facility, $stateParams) {
                    return Facility.get({id: $stateParams.id}).$promise;
                }]
            }
        })

When I try to call /facility/123 (app.facility.show) I get the output of /facility. When I create a link to this state, I see in dev tools, that the API request and the correct template has been loaded, but the view does not change.

Now, super strange: When I change the name of the state to app.facilityShow it works. So somehow the inheritance fails.

Do you have an idea why? Thanks in advance.

a-r-m-i-n commented 9 years ago

Okay, I think I got it. I've renamed the state app.facility to app.facility.index and defined a new state app.facility which is abstract and looks like this:

        .state('app.facility', {
            abstract: true,
            url: '/facility',
            template: '<div ui-view></div>'
        })

The template part is necessary. Without it, it does not work.