多视图，其中一个将根据状态或 URL 进行更改，而其他视图保持不变 [Angular UI Router]答案

【问题标题】：Multiple View where one will change based on State or Url and others with stay same [Angular UI Router]多视图，其中一个将根据状态或 URL 进行更改，而其他视图保持不变 [Angular UI Router]
【发布时间】：2016-10-20 03:09:00
【问题描述】：

我尝试使用 Angular 和 ASP.NET Web API 为我创建博客。这是我的Layout.cshtml

<div id="header">
    <div data-ui-view="menu"></div>
</div>
<div id="main">
    <div data-ui-view></div>
    <div data-ui-view="sidebar"></div>
</div>
<div id="footer">
    <div data-ui-view="footer"></div>
</div>

使用text/ng-template查看和查看

<!-- Layout Views -->
<script type="text/ng-template" id="/Templates/Layout/Menu.html">
   <div>
     <a ui-sref="home">Home</a>
     <a ui-sref="register">Register</a>
</script>

<script type="text/ng-template" id="/Templates/Layout/Sidebar.html">
   <div>Sidebar</div>
</script>

<script type="text/ng-template" id="/Templates/Layout/Footer.html">
   <div>Footer</div>
</script>

<!-- Page Views -->
<script type="text/ng-template" id="/Templates/Layout/Home.html">
   <div>Home</div>
</script>

<script type="text/ng-template" id="/Templates/Layout/Register.html">
   <div>Register</div>
   <a ui-sref="home">Back</a>
</script>

这里是app.js

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
      function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
           .state('home', {
                url: '/',
               views: {
                 '': {
                   templateUrl: '/Templates/Layout/Home.html'
                 },
                 'menu@': {
                   templateUrl: '/Templates/Layout/Menu.html'
                 },
                 'sidebar@': {
                   templateUrl: '/Templates/Layout/Sidebar.html'
                 },
                 'footer@': {
                   templateUrl: '/Templates/Layout/Footer.html'
                 }
               }
           }).state('register', {
               url: '^/Register',
               templateUrl: '/Templates/Layout/Register.html'
        });
  }]);

这是我想要的：

当我浏览主页(domain/#/) 时，它会将未命名的视图替换为Home.html
当我浏览注册页面(domain/#/Register)或从菜单中点击Register时，它将用Register.html替换未命名的视图

目前，domain/#/ 工作正常，但 (domain/#/Register) 仅显示 Register 视图，而它也应该显示其他 3 个（菜单、侧边栏、页脚）视图。

CODEPEN LINK

我检查了 2 天的 stackoverflow 和不同的博客，但无法解决问题。我在这里想念什么？任何帮助，将不胜感激。

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

实现此目的的一种方法是创建一个抽象的“主”状态，您可以在其中定义命名视图的模板，然后为您的home 和register 状态定义此“主”的“子级”。这是一个直接改编自您的 Codepen 的示例：

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('master', {
          abstract: true,
          views: {
            'menu@': {
              templateUrl: '/Templates/Layout/Menu.html'
            },
            'sidebar@': {
              templateUrl: '/Templates/Layout/Sidebar.html'
            },
            'footer@': {
              templateUrl: '/Templates/Layout/Footer.html'
            }
          }
        })
        .state('master.home', {
          url: '/',
          views: {
            '@': {
              templateUrl: '/Templates/Layout/Home.html'
            }
          }


        }).state('master.register', {
          url: '/Register',
          views: {
            '@': {
              templateUrl: '/Templates/Layout/Register.html'
            }
          }

        });
    }
  ]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

<body ng-app="app">
  <div id="header">
    <div data-ui-view="menu"></div>
  </div>
  <div id="main">
    <div data-ui-view></div>
    <div data-ui-view="sidebar"></div>
  </div>
  <div id="footer">
    <div data-ui-view="footer"></div>
  </div>

  <!-- Layout Views-->
  <script type="text/ng-template" id="/Templates/Layout/Menu.html">
    <div>
      <a ui-sref="master.home">Home</a>
      <a ui-sref="master.register">Register</a>
    </div>
  </script>

  <script type="text/ng-template" id="/Templates/Layout/Sidebar.html">
    <div>Sidebar</div>
  </script>

  <script type="text/ng-template" id="/Templates/Layout/Footer.html">
    <div>Footer</div>
  </script>

  <!-- Page Views-->
  <script type="text/ng-template" id="/Templates/Layout/Home.html">
    <div>Home</div>
  </script>

  <script type="text/ng-template" id="/Templates/Layout/Register.html">
    <div>Register</div>
    <a ui-sref="master.home">Back</a>
  </script>
</body>

【讨论】：

谢谢。这对我有用。我真的想要这样的东西。

【解决方案2】：

您需要在任何时候想要保留某些视图时使用子状态。你是如何设置它的，register state 不是任何东西的孩子，所以当你切换到它时 - 所有的视图都会被重置！

你需要做的两个改变：

将register定义为home的子状态：

.state('home.register', {
    url: 'Register',
    views: {
        '@': {
            templateUrl: '/Templates/Layout/Register.html'
        }
    }

更新菜单中的ui-sref：

<script type="text/ng-template" id="/Templates/Layout/Menu.html">
    <div>
        <a ui-sref="home">Home</a>
        <a ui-sref="home.register">Register</a>
    </div>
</script>

Working Codepen

请在nested states and nested views 和multiple named views 上查看ui-router 文档。

@Lex 对拥有基本主/根/布局状态的回答也非常好，并且在更复杂的情况下也能很好地工作。我的答案是让您的代码正常工作的非常简单的最低要求。

【讨论】：

谢谢。您的答案对我有用，只需对我的代码进行最少的更改。但对于未来，我将使用@Lex 的答案。