AngularJS 为同一个 URL 路由多个 ui 视图？

Question

我需要多个 ui-views 一个 URL（我的主页）。 ui-routing 的限制是我不能有多个 <div ui-view></div> 但它们必须处于嵌套状态。

<div class="left-div">
  <div ui-view></div>
  <button ui-sref="1"></button>
  <button ui-sref="2"></button>
  <button ui-sref="3"></button>
</div>

<div class="right-div">
  <button ui-sref="3"></button>
  <div ui-view></div>
</div>

如何才能让 ui-sref=1 和 ui-sref=2 更新里面的 ui-view：

<div class="left-div"></div>

和 ui-sref=3 将更新 ui-view inside <div class="right-div"></div>

我在使用 ui-router 时遇到的问题是，从 ui-sref 从 1 -> 3 或 2 -> 3 更改 ui-view 到 left-div 会消失，因为 URL 改变了。

我该如何处理？

编辑-我目前的状态观点

chatApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home')

    $stateProvider

            .state('friend', {
                url: '/friend',
                templateUrl: 'friend.html'
            })

            .state('group', {
                url: '/group',
                templateUrl: 'group.html'
            })

            .state('search', {
                url: '/search',
                templateUrl: 'search.html'
            })

            .state('home', {
                url: '/search',
                templateUrl: 'search.html'
            })

            .state('public', {
                url: '/public',
                views: {
                    'publicView': { templateUrl: 'private-chat.html' }
                }
            });

  <div class="col-md-3 left-col-friends" ng-controller="friendListCtrl">

    <div class="friends-list-navigation">
      <div class="option-wrapper">

        <div class="col-xs-3 home-option" ui-sref="public"><i class="fa fa-home fa-2x"></i></div>
        <div class="col-xs-3 friend-option" ui-sref="friend"><i class="fa fa-user fa-2x"></i></div>
        <div class="col-xs-3 group-option" ui-sref="group"><i class="fa fa-users fa-2x"></i></div>
        <div class="col-xs-3 search-option" ui-sref="search"><i class="fa fa-search fa-2x"></i></div>


      </div>
    </div>
    <div class="friends-list-display">
        <div ui-view></div>
    </div>

  </div>

  <div class="col-md-9 middle-col-chat" ng-controller="publicCtrl">
    <div class="bubble-frame-public">
      <div ui-view="publicView"></div>
    </div>


    <div class="input-fields-wrapper" emoji-form emoji-message="emojiMessage">
      <div class="col-md-8">
        <textarea class="col-md-4" id="messageInput" ng-model="emojiMessage.messagetext"></textarea>
      </div>



      <div class="col-md-3">
        <button class="btn btn-default btn-send-public-msg" ng-click="emojiMessage.replyToUser()"><i class="fa fa-paper-plane"></i></button>
        <button class="btn btn-default" id="emojibtn">
          <i class="fa fa-smile-o"></i>
        </button>
        <button class="btn btn-default"><i class="fa fa-video-camera"></i></button>
      </div>


    </div>

  </div>

Answer 1

我猜测 publicView 是您希望在其他视图发生变化时保持不变的视图。这是解决它的一种方法。

$stateProvider
    .state('home', {
        url: '/home',
        views: {
            '@': {
                templateUrl: 'search.html'
            },
            'publicView@': {
                templateUrl: 'private-chat.html'
            }
        }
    })
    .state('home.friend', {
        views: {
            '@': {
                templateUrl: 'friend.html'
            }
        }
    })
    .state('home.group', {
        views: {
            '@': {
                templateUrl: 'group.html'
            }
        }
    });

默认 URL 为 /home。访问时，publicView 填充为 private-chat.html，未命名的 ui-view 填充为 search.html.

对于 friend 和 group 州，他们 单独使用 publicView 并且他们 不使用new URLs，这就是我认为你想要的。这是通过使它们成为 home 的子状态并通过绝对指定应更改哪些视图来实现的。

AngularJS 为同一个 URL 路由多个 ui 视图？

AngularJS routing multiple ui-views for the same URL?

javascript

html

angularjs

angular-ui-router

angular-ui-router-extras