Question

我有一个多视图，一个视图。我想使用单一视图的所有页面，逻辑结构角度，另外面包屑导航，在主页的头部。配置代码：

$stateProvider
    .state('otherwise', {
        url: '*path',
        controller: function ($state) {
            var lastUrl = sessionStorage.lastUrl

            if (lastUrl && lastUrl != 'otherwise')
                $state.go(lastUrl);
            else if (!lastUrl)
                $state.go('Companies');
        },
        data: {
            requireLogin: false
        }
    })
  .state('Create', {
      controller: 'myControl',
      url: '/',
      templateUrl: 'Create.html',
      data: {
          requireLogin: true
      }
  })

    .state('Jobs', {
        controller: 'myControl',
        url: '/',
        templateUrl: 'JobsList.html',
        data: {
            requireLogin: true
        }
    })

    .state('Companies', {
        controller: 'myControl',
        url: '',
        templateUrl: 'CompaniesList.html',
        data: {
            requireLogin: false,
            breadcrumbProxy: 'Companies.CarsList'
        }
    })

    .state('Companies.CarsList', {
        controller: 'myControl',
        params: { id: ':id', companyName: ':companyName' },
        url: '',
        templateUrl: 'CarsList.html',
        data: {
            requireLogin: false,
            displayName: 'List'
        }
    })

    .state('Companies.CarsInfo', {
        controller: 'myControl',
        templateUrl: "CarInfo.html",
        data: {
            requireLogin: false,
            displayName: 'Info'
        }
    })

html：在主页中使用单个 VIEW

 <div ui-view></div>

您有我的配置解决方案吗？！

Answer 1

单一视图

要处理多个视图，当您的模板中有多个<div ui-view></div>时，ui-router会提供rules目标视图。

默认情况下，状态发生在父状态的唯一<div ui-view></div>中。因此，根据您的配置，Companies.CarsList模板将插入<div ui-view></div>状态的Companies（在CompaniesList.html中）。

要覆盖它，只需将第二级状态templateUrl和controller（Companies.CarsList和Companies.CarsInfo）包裹在views个对象中即可路由器将视图置于根状态的唯一<div ui-view></div>（在index.html中），如下所示：

.state('Companies.CarsList', {
    params: { id: ':id', companyName: ':companyName' },
    url: '',
    views: {
        "@": { // rule for absolutely targetting the unnamed view in root unnamed state.
            controller: 'myControl',
            templateUrl: 'CarsList.html',
        }
    },
    data: {
        requireLogin: false,
        displayName: 'List'
    }
})

面包屑

查看angular-breadcrumb，它会根据ui-router配置生成面包屑。您所要做的就是给各州命名（就像您似乎已经使用data > displayName）。

模块可以处理我上面描述的绝对视图定位。有关详细信息，请参阅docs

Angular Js - ui-router with Breadcrumbs

1 个答案:

单一视图

面包屑