Question

我在设置的简单ui-router示例时遇到了问题。我有一个公司页面，其默认子状态应显示CompanyProfile，但在我点击个人资料之前默认为空。点击员工后，我必须再次点击个人资料才能再次显示。理想情况下，我希望ui-sref="company()"和ui-sref="company.profile()"显示相同的屏幕。好像我错过了一些小事......

这是plnkr：

http://plnkr.co/edit/A3LHGqQIuRlK1QdjuzrP?p=preview

HTML：

  <a ui-sref="company()">company</a>
  | <a ui-sref="company.profile()">profile</a>
  | <a ui-sref="company.employees()">employees</a>

JS：

$stateProvider
    .state('company', {
        url: '/',
        templateUrl: 'company.html',
        controller: 'CompanyCtrl as CompanyCtrl'
    })
    .state('company.profile', {
        url: '',
        templateUrl: 'profile.html',
        controller: 'CompanyProfileCtrl as CompanyProfileCtrl'
    })
    .state('company.employees', {
        url: '/employees',
        templateUrl: 'employees.html',
        controller: 'CompanyEmployeesCtrl as CompanyEmployeesCtrl'
    });

顺便说一下，我将所有内容都写成组件并决定在每个组件中定义路由，这样您就可以在3个控制器中找到3个状态定义。我不完全确定这是最好的方法还是没有。

Answer 1

默认状态完全取决于您调用 $urlRouterProvider.otherwise() 的方式，并通过网址将应用程序转换为特定网址，其中ui-router检测并查找它看到的第一个状态。

在main.js配置中，将/网址定义为应用程序的默认网址，从技术上讲，它是company州的网址，是父级链中的第一个状态州和儿童州，使其成为默认状态。实际上，这也是您希望应用程序默认为company.profile状态的结果网址。

要解决此问题，请参阅应用程序的用例。

使用案例：如果您的应用程序将company状态定义为非导航状态，则将其设置为抽象状态可以解决问题。

<强> DEMO

<强> CompanyCtrl.js

$stateProvider
    .state('company', {
        abstract: true,
        url: '/',
        templateUrl: 'company.html',
        controller: 'CompanyCtrl as CompanyCtrl'
    });

使用案例：如果company状态为nagivational，则只需删除url状态中的company定义，然后更改url company.profile的定义}状态到'/'。此解决方案的唯一警告是丢失要为href状态定义的任何锚标记应用的ui-sref="company"属性，这也意味着text光标的应用。为了缓解此问题，您还可以使用anchor游标定义所有带有ui-sref属性的pointer代码。

<强> DEMO

<强> CompanyCtrl.js

$stateProvider
    .state('company', {
        templateUrl: 'company.html',
        controller: 'CompanyCtrl as CompanyCtrl'
    });

<强> CompanyProfileCtrl.js

$stateProvider
    .state('company.profile', {
        url: '/',
        templateUrl: 'profile.html',
        controller: 'CompanyProfileCtrl as CompanyProfileCtrl'
    })

<强>的style.css

a[ui-sref] {
  cursor: pointer;
}

<强>更新

用例：与用例＃2相同，但使company状态成为抽象状态。

<强> DEMO

<强> CompanyCtrl.js

$stateProvider
    .state('company', {
        abstract: true,
        templateUrl: 'company.html',
        controller: 'CompanyCtrl as CompanyCtrl'
    });

ui-router中的默认嵌套ui-views

1 个答案: