Angularjs 父模板也显示在子状态上。如何摆脱这个问题？

我使用的是angular ui router 0.2.15，有一个页面/配置文件，现在我想点击按钮编辑配置文件，url变成/profile/edit

现在我有点混淆了UI路由器的视图和嵌套视图的概念，并尝试了两者，但问题仍然存在

使用嵌套状态

  .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'
            }
        })

和profile.html

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

---

在这种情况下，我的问题是当我点击编辑页面时，它也会显示父视图的内容。如何处理此问题？

子状态将放置在父级的占位符位置

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

视图的神奇名称

'@'

表示-它是根，未命名。有许多类似的问答：

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