Угловая проблема UI-маршрутизации / UI-Router Extras Советы?
Я столкнулся с проблемой, которую не могу решить с помощью ui-router в AngularJS. Он включает в себя независимые представления на той же странице, но одно представление может повлиять на другое представление условно. Пожалуйста, возьмите мой код, например:
Основной шаблон (test2.html)
<!DOCTYPE html>
<html lang="en" ng-app="chatApp">
<head>
<meta charset="UTF-8">
<title>Sticky State</title>
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-controller="routeCtrl">
<div ui-view><div>
<script src="/angular/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://rawgit.com/christopherthielen/ui-router-extras/0.0.13/release/ct-ui-router-extras.js"></script>
<script src="/js/controllers/test2.js"></script>
</body>
</html>test3.html
<div class="col-md-6" style="padding-top:50px;">
<button ui-sref=".public">public Chat</button>
<button ui-sref=".friends">friends</button>
<button ui-sref=".search">search</button>
<div style="padding-top:50px;">
<div ui-view></div>
</div>
</div>
<div class="col-md-6" style="padding-top:50px;">
<div ui-view="chatview"></div>
</div>test3.js
var chatApp = angular.module("chatApp", ['ui.router','ct.ui.router.extras']);
chatApp.config(function($stateProvider, $stickyStateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '',
views: {
'': {templateUrl: 'test3.html'},
'chatview@home': { template: 'public chat' }
}
})
.state('home.public', {
url: '/public',
views: {
'chatview@home': { template: 'public chat' }
}
})
.state('home.friends', {
url: '/friends',
views: {
'chatview@home': { template: 'private chat' },
'': { template: 'private' }
}
})
.state('home.search', {
url: '/search',
template: 'search'
})
});Хочу я пытаюсь добиться:
"Публичный чат" - это кнопка, которая должна <div ui-view="chatview"></div> в публичный чат совершенно не зависит от состояния <div ui-view></div>, Например, если я был на вкладке друзей и нажал на общедоступную кнопку, состояние друзей должно сохраняться, пока <div ui-view="chatview"></div> загружает шаблон публичного чата. Кнопка друзей загружает "приватный чат", но если я нажму на вкладку поиска, я не хочу, чтобы мой личный чат вышел. Да, я мог бы изменить свое именованное представление в этом состоянии, чтобы оно стало тем же шаблоном, что и друзья, но это возвращает к той же проблеме, что и если бы я перешел с кнопки общего доступа на кнопку поиска.
Надеюсь, у меня есть смысл, вот что мне нужно.
желаемое действие: когда на вкладке друзей и пользователь нажимает на кнопку общего <div ui-view="chatview"></div> должен быть заполнен общедоступным чатом, пока вкладка друзей остается в своем текущем состоянии в <div ui-view></div>,
А ТАКЖЕ
когда на вкладке поиска пользователь нажимает на кнопку общего доступа <div ui-view="chatview"></div> должен быть заполнен публичным чатом, пока поиск остается в его текущем состоянии в <div ui-view></div>
А ТАКЖЕ
когда пользователь нажимает на общедоступную кнопку (переходит в общедоступный чат), затем нажимает на вкладку поиска, пока состояние общедоступного чата остается <div ui-view="chatview"></div>,
А ТАКЖЕ
Пользователь в данный момент находится в приватном чате и нажимает на вкладку поиска <div ui-view="chatview"></div> должен оставаться в приватном чате, пока <div ui-view></div> заполняется шаблоном поиска.
Условия увеличиваются, если я добавляю больше вкладок, но я почти уверен, что мне нужны дополнительные функции Ui-Routers, но я не могу понять документацию. Хорошим примером является мессенджер чата. Проблема заключается в URL-адресе, так как один URL-адрес загрузит указанный шаблон, не учитывая, что мне нужно разделять представления. Пример кода был бы очень признателен, спасибо!