Question

我尝试使用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

我检查stackoverflow＆amp;不同的博客2天，但无法解决问题。我想念的是什么？任何帮助，将不胜感激。

Answer 1

你可以做到这一点的一种方法是拥有一个抽象的＆＃34;主人＆＃34;在哪里定义命名视图的模板，然后是＆＃34; children＆＃34;这个＆＃34;大师＆＃34;适用于您的home和register州。以下是直接从您的Codepen中调整的示例：

＆＃13;

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'
            }
          }

        });
    }
  ]);

＆＃13;

<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>

＆＃13;

Answer 2

只要您希望某些视图能够存在，您就需要使用子状态。你如何设置，register状态不是任何东西的孩子，所以当你切换到它时 - 所有的视图都被重置！

您需要做出两项更改：

将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获得基本主/根/布局状态的答案也非常好，在更复杂的情况下运行良好。我的答案是使代码正常工作的最简单，最简单的方法。

多视图，其中一个将基于状态或URL更改，其他人保持相同[Angular UI Router]

2 个答案: