我正在使用Angular UI路由器,当我点击导航栏中的任何选项时,它会将相应的状态加载到子视图中。但问题是,每当我点击导航栏中的任何列表项时,它也会加载父项,并将导航栏重置为默认值。 如何解决这个问题,每当我点击任何一个导航栏项时,它会将相应的状态加载到子视图,但从不重置父视图。
检查此gif以了解问题。
这是app.js中的config
块
// 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>
答案 0 :(得分:1)
要做到这一点,您的视图需要嵌套,父状态需要是抽象的。在这里你有一个可能通过一些亮点的例子。
.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是底部的一组标签)。
希望它有点用处