0

AngularJS の ui-router で解決できない問題に遭遇しました。同じページに独立したビューが含まれますが、1 つのビューが条件付きで他のビューに影響を与える可能性があります。私のコードを例にとってください：

メイン テンプレート (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 エクストラが必要なのは確かですが、ドキュメントを理解できません。良い例は、チャット アプリケーションのメッセンジャーです。ビューを分離する必要があることを考慮せずに、1つのURLが指定されたテンプレートをロードするため、問題はURLにあります。コード例は本当に感謝しています!

4

0 に答える 0