Question

我正在创建一个应用程序，在仪表板中我有标题和侧栏，它们将位于仪表板的每个页面中，因此我为它们创建了部分文件。

问题在于，如果我访问/dashboard/users我得到/dashboard中的相同内容，我想知道如何保留标题和侧边栏但是将主要内容更改为/views/dashboard/users.html档案？

我创建了这样的状态：

.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .state('dashboard', {
        url: '/dashboard',
        views: {
          '': {
            templateUrl: 'views/dashboard.html'
          },
          'header@dashboard': {
            templateUrl: 'views/dashboard/partials/header.html'
          },
          'sidebar@dashboard': {
            templateUrl: 'views/dashboard/partials/sidebar.html'
          }
        },
        controller: 'DashboardCtrl',
        controllerAs: 'dashboard'
      })
      .state('dashboard.users', {
        url: '/users',
        views: {
          '': {
            templateUrl: 'views/dashboard/users.html'
          }
        },
        controller: 'DashboardUsersCtrl',
        controllerAs: 'dashboard/users'
      });
});

/main.html

<p>main</p>

/index.html

<body ng-app="freelancerApp">
    <div ui-view></div>
</body>

/views/dashboard.html

<div ui-view="header"></div>
<p>dashboard</p>
<div ui-view="sidebar"></div>

/views/dashboard/users.html

<div ui-view="header"></div>
<p>users</p>
<div ui-view="sidebar"></div>

/views/dashboard/partials/header.html

</p>header</p>

/views/dashboard/partials/sidebar.html

<p>sidebar</p>

Answer 1

在此代码段中添加 abstract：true

.state('dashboard', {
    url: '/dashboard',
    abstract: true,
    views: {
      '': {
        templateUrl: 'views/dashboard.html'
      },
      'header@dashboard': {
        templateUrl: 'views/dashboard/partials/header.html'
      },
      'sidebar@dashboard': {
        templateUrl: 'views/dashboard/partials/sidebar.html'
      }
    },
    controller: 'DashboardCtrl',
    controllerAs: 'dashboard'
  })

Answer 2

我想说，你的父模板，只是缺少一个孩子的地方（未命名的视图目标）

//views/dashboard.html
<div ui-view="header"></div>
<p>dashboard</p>
<div ui-view="sidebar"></div>

应该是

//views/dashboard.html
<div ui-view="header"></div>
<div ui-view="">
  // we can keep it or remove the content
  <p>dashboard</p> // just visible in parent
</div>
<div ui-view="sidebar"></div>

现在，对于未命名的子视图，我们有一个目标<div ui-view=""></div>，在views :{ '': {...}}

中定义为.state('dashboard.users'...

UI-Router父视图无法以角度运行

2 个答案:

UI-Router父视​​图无法以角度运行

2 个答案:

UI-Router父视图无法以角度运行