Я использую AngularJS 1.5.8 и ui-router, и у меня есть меню слева и область содержимого справа.
Я хочу, чтобы возможность перемещаться по системе меню без обновления "контента" ui-view, возможно ли это?
В моем index.html у меня есть эти два ui-views
<div ui-view="menu"></div>
<div class="content" ui-view="content"></div>
Тогда в моих настройках файла маршрута у меня есть следующее:
settingsRoute = function($stateProvider, $urlRouterProvider){
$stateProvider
.state('settings', {
url: '/settings',
views: {
"menu": {templateUrl: 'templates/settings.html'}
}
})
.state('account', {
url: "/account",
views: {
"menu": {templateUrl: 'templates/settings.html'},
"content": {
templateUrl: 'templates/account.html',
controller: 'account'
}
}
});
$urlRouterProvider.otherwise('/account');
}
В моем файле маршрутизации расходов у меня есть
costingsRoute = function($stateProvider){
$stateProvider
.state('costings', {
url: '/costings',
views: {
"menu": {templateUrl: 'templates/costings.html'}
}
})
.state('invoices', {
url: '/invoices',
views: {
"menu": {templateUrl: 'templates/costings.html'},
"content": {
templateUrl: 'templates/invoices.html'
}
}
})
}
angular.module('app').config(costingsRoute);
Например, в следующей демонстрационной версии, когда она загружает его, загружается тело учетной записи, отображаемое в контенте, когда я нажимаю "затраты", я хотел бы, чтобы это только изменило меню и оставило представление содержимого тем, что находится в представлении содержимого, это может быть "тело счета" или "тело профиля".
добавьте это в свой калькулятор...
https://plnkr.co/edit/Q2nXXWpSywkdEUKIUmC0?p=preview
.state('costings', {
url: '/costings',
views: {
"menu": {templateUrl: 'costings.html'},
"content": {
templateUrl: 'account.html'
}
}
})