angularjs - Angular Js - 带面包屑的 ui 路由器

Question

我有一个 View 的多个页面。我想对所有页面使用单一 View ，逻辑结构为 Angular，此外还有用于导航的面包屑，位于主页的头部。 配置代码:

$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

单一 View

为了处理多个 View ，ui-router 提供 rules当您有多个 <div ui-view></div> 时定位 View 在您的模板中。

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

要覆盖它，只需将 templateUrl 括起来即可和controller Companies.CarsList 中的二级状态( Companies.CarsInfo 和 views )反对 ui-router 将 View 放置在唯一的 <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 所做的那样)。

该模块可以处理我上面描述的绝对 View 定位。请参阅docs了解详情