我正在使用 Angular UI Router,当我单击导航栏中的任何选项时,它会将相应的状态加载到 subview 中。但问题是,每当我单击导航栏中的任何列表项时,它也会加载父项并将导航栏重置为默认值。 如何解决此问题,每当我单击任何此导航栏项目时,它都会将相应的状态加载到 subview ,但从不重置父 View 。
检查此 gif 以了解问题。
这是我在 app.js 中的 config
block
// Routes defined in config
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
// Home route
.state('dashboard', {
url: '/dashboard',
views: {
'': {
templateUrl: 'views/dashboard.html' ,
controller : 'mainCtrl'
},
'columnOne@dashboard': {
templateUrl: 'views/home.html',
controller: 'homeController'
}
}
})
//login route
.state('login',{
url: '/login',
templateUrl: 'views/login.html',
controller: 'authController'
})
.state('logout',{
controller:'logout'
})
//Add role
.state('addRole',{
url: '/addRole',
views: {
'': {
templateUrl: 'views/dashboard.html' ,
controller : 'mainCtrl'
},
'columnOne@addRole': {
templateUrl: 'views/addRole.html',
controller: 'addRole'
}
}
})
//Add role
.state('getUserInfoData',{
url: '/getUserInfoData',
views: {
'': {
templateUrl: 'views/dashboard.html' ,
controller : 'mainCtrl'
},
'columnOne@getUserInfoData': {
templateUrl: 'views/getUserInfoData.html',
controller: 'getUserInfoData'
}
}
})
//manage role
.state('manageRole',{
url: '/manageRole',
views: {
'': {
templateUrl: 'views/dashboard.html' ,
controller : 'mainCtrl'
},
'columnOne@manageRole': {
templateUrl: 'views/manageRole.html',
controller: 'manageRole'
}
}
})
.state('manageUsers',{
url: '/manageUsers',
views: {
'': {
templateUrl: 'views/dashboard.html',
controller : 'mainCtrl'
},
'columnOne@manageUsers': {
templateUrl: 'views/manageUsers.html',
controller: 'manageUsers'
}
}
})
.state('sendSms',{
url: '/sendSms',
views: {
'': {
templateUrl: 'views/dashboard.html',
controller : 'mainCtrl'
},
'columnOne@sendSms': {
templateUrl: 'views/sendSms.html',
controller : 'smsController'
}
}
})
//Manage Import/Export CSV
.state('manageCsv',{
url: '/manageCsv',
views: {
'': {
templateUrl: 'views/dashboard.html' ,
controller : 'mainCtrl'
},
'columnOne@manageCsv': {
templateUrl: 'views/manageCsv.html',
controller: 'manageCsv'
}
}
})
// Check user Route
.state('checkUser', {
url: '/',
controller: 'checkController'
})
// List All Claim
.state('createForm', {
url: '/createForm',
views: {
'': {
templateUrl: 'views/dashboard.html' ,
controller : 'mainCtrl'
},
'columnOne@createForm': {
templateUrl:'views/createForm.html',
controller: 'createForm'
}
}
})
//list claim profile
.state('claimProfile', {
url: '/claimProfile/:id',
views: {
'': {
templateUrl: 'views/dashboard.html' ,
controller : 'mainCtrl'
},
'columnOne@claimProfile': {
templateUrl:'views/claimProfile.html',
controller: 'claimProfile'
}
}
})
//list all forms
.state('manageForms', {
url: '/manageForms',
views: {
'': {
templateUrl: 'views/dashboard.html' ,
controller : 'mainCtrl'
},
'columnOne@manageForms': {
templateUrl:'views/manageForms.html',
controller: 'manageForms'
}
}
});
});
这是我的 HTML
<div class="left-sidebar-section">
<div class="section-title">Claims</div>
<ul class="list-unstyled" id="form-components">
<li ui-sref="getUserInfoData">
<button class="btn btn-flat" data-parent="#form-components" ng-class="{activeMenu : isActive('/getUserInfoData')}">
<span class="btn-title">
<a>Users Data</a>
</span>
<i class="material-icons pull-left icon">folder</i>
</button>
</li>
</ul>
</div>
最佳答案
为此,您的 View 需要嵌套,并且父状态需要是抽象的。这里有一个可能会通过一些启发的例子。
.state('estadisticas', {
url: '/estadisticas',
abstract: true,
templateUrl: 'js/components/stat/tabs.html'
})
.state('estadisticas.producto', {
url: '/producto',
abstract: true,
views: {
'menuContent': {
templateUrl: 'js/components/stat/producto/tabs.html'
}
}
})
.state('estadisticas.producto.general', {
url: '/general',
views: {
'tab-producto-general': {
templateUrl: 'js/components/stat/producto/general.html',
controller: 'StatsProductoCtrl'
}
}
})
在此示例中,存在三个级别。检查第一和第二状态是否是抽象的,即使它们有自己的模板(js/components/stat/tabs.html 是侧面菜单,js/components/stat/producto/tabs.html 是底部的一组选项卡)。
希望对大家有用
关于javascript - 在 AngularJS 中加载子状态而不刷新父状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41958390/