parent template also displaying on child state. how to get rid off this issue?

Question

I am using angular ui router 0.2.15 and there is one page /profile and now want to edit the profile on click of button and url become /profile/edit.

Now I was bit confused between named views and nested view concept of UI router and tried with both of them but issue remains .

using nested state

  .state("profile", {
            url: '/profile',
            controller: 'UserController',
            controllerAs: 'vm',
            templateUrl: 'app/views/user/profile.html',
            data: {
                requiresAuth: true,
                pageTitle: 'Profile'
            }
        })
        .state("edit", {
            url: '/edit',
            parent:'profile',
            templateUrl: 'app/views/user/edit_profile.html',
            data: {
                requiresAuth: true,
                pageTitle: 'Edit Profile'
            }
        })

and profile.html

<div ui-view=""></div>
<button type="button" class="btn fa fa-pencil" ui-sref="edit"></button>

in this case my issue is when I click on edit page, it also show the content of parent view too. How to handle this?

score 2 · Accepted Answer · edited May 23 '17 at 12:25

Child state will be placed at the position of parent's place holder

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

That will not hide parent view, just replace that div with child's template

But we really can replace parent view with child's one. The point is to target index.html (root) ui-view

.state("edit", {
    url: '/edit',
    parent:'profile',
    views: {
        '@': {
            templateUrl: 'app/views/user/edit_profile.html',
         },
    },
    data: {
        requiresAuth: true,
        pageTitle: 'Edit Profile'
    }
})

the magical name of the view '@' says - it is root and unnamed. There are many similar Q & A: Angular UI Router - Nested States with multiple layouts

parent template also displaying on child state. how to get rid off this issue?

1 Answers1