0

我遇到了一个我无法在 AngularJS 中使用 ui-router 解决的问题。它涉及同一页面上的独立视图，但一个视图可以有条件地影响另一个视图。请以我的代码为例：

主模板（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 将加载其指定的模板，而不考虑我必须单独的视图。一个代码示例将非常感谢！

4

0 回答 0