Question

我遇到过一个我无法用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>时，应使用公共聊天 WHILE 填充朋友标签保持其当前状态<div ui-view></div> 。

和

在搜索标签上，用户点击公开按钮<div ui-view="chatview"></div>时应填充公开聊天 WHILE ，搜索仍保持当前状态<div ui-view></div>

和

当用户点击公开按钮（进入公共聊天），然后在公共聊天状态保持在<div ui-view="chatview"></div>时点击搜索标签。

和

用户目前正在进行私聊，点击搜索标签<div ui-view="chatview"></div>时应保持私聊，<div ui-view></div>填充搜索模板。

如果我添加更多选项卡，条件会增加，但我很确定我需要ui-routers附加功能，但我无法理解文档。一个很好的例子是聊天应用程序信使。问题在于url，因为一个URL将加载其指定的模板，而不考虑我必须分离视图。一个代码示例将非常感谢谢谢！

Angular ui-routing问题/ ui-router临时建议？

0 个答案: