CODEWITHSUNDEEP
angularjsangular-ui-router
Armin
Armin

Reputation: 15938

Angular ui-router sub state does not update view

This is a angular-ui-route configuration. My problem is about the last one, the show action of facility.

$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', {
        parent: 'app',
        url: '/facility',
        title: 'Einrichtungen',
        templateUrl: helper.basepath('Facility/Index.html'),
        controller: 'FacilityController',
        resolve: {
            Facilities: ['Facility', function(Facility) {
                return Facility.query().$promise;
            }]
        }
    })
    .state('app.facility.show', {
        url: '/:id',
        title: 'Einrichtung Detail',
        templateUrl: helper.basepath('Facility/Show.html'),
        controller: 'FacilityItemController',
        resolve: {
            Facility: ['Facility', '$stateParams', function(Facility, $stateParams) {
                return Facility.get({id: $stateParams.id}).$promise;
            }]
        }
    })

When I call a link like this

<a ui-sref=".show({id: facility.id})">{{facility.name}}</a>

the URL changes and the resource and the Show.html template are loaded by ajax, but the view does not change. No errors occured.

When I rename the state to app.facilityShow (no child state) the view loads. Do you have an idea what I am doing wrong?

Upvotes: 0

Views: 554

Answers (2)

Armin
Armin

Reputation: 15938

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.

Upvotes: 0

kachhalimbu
kachhalimbu

Reputation: 2200

From ui-router wiki

A note on relative ui-sref targets:

You can also use relative state paths within ui-sref, just like the relative paths passed to state.go(). You just need to be aware that the path is relative to the state that the link lives in, in other words the state that loaded the template containing the link.

You need to be in app.facility state for following ui-sref to work

<a ui-sref=".show({id: facility.id})">{{facility.name}}</a>

Upvotes: 1

Related Questions