Angularjs ui路由器中的默认嵌套ui视图

我在设置一个简单的ui路由器示例时遇到问题。我有一个公司页面，它的默认子状态应该显示CompanyProfile，但在我单击profile之前它默认为nothing。单击“员工”后，我必须单击“个人资料”两次才能再次显示。理想情况下，我希望

ui sref=“company（）”

和

ui sref=“company.profile（）”

显示相同的屏幕。我好像少了点什么

以下是plnkr：

HTML:

---

顺便说一句，我将所有内容都作为组件编写，并决定在每个组件中定义路由，因此您将在3个控制器中找到3个状态定义。我不完全确定这是否是最好的方法。

默认状态完全取决于您如何调用，向它传递url将应用程序转换到特定url，其中

ui路由器

检测并查找它看到的第一个状态

在

main.js

配置中，将

/

url定义为应用程序的默认url，从技术上讲，它是

公司

状态的url，是父状态和子状态链中的第一个状态，使其成为默认状态。事实上，这也是您希望应用程序默认设置的

company.profile

状态的结果url

要解决此问题，取决于应用程序的用例

用例：如果应用程序将

公司

状态定义为非导航状态，则将其设置为抽象状态可以解决问题

CompanyCtrl.js

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

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

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

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

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

用例：如果

company

状态为nagivional，则只需删除

company

状态中的

url

定义，并将

company.profile

状态的

url

定义更改为

'/'

。此解决方案唯一需要注意的是，对于使用

ui sref=“company”

状态定义的任何锚定标记，将丢失

href

属性，这也意味着应用

文本

光标。为了缓解此问题，您还可以使用

指针

光标定义带有

ui sref

属性的所有

anchor

标记

CompanyCtrl.js

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

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

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

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

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

CompanyProfileCtrl.js

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

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

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

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

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

style.css

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

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

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

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

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

更新：

用例：与用例#2相同，但使

公司

状态成为抽象状态

CompanyCtrl.js

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

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

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

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

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

---

默认状态完全取决于调用的方式，向它传递一个url将应用程序转换到特定的url，其中

ui router

检测并查找它看到的第一个状态

在

main.js

配置中，将

/

url定义为应用程序的默认url，从技术上讲，它是

公司

状态的url，是父状态和子状态链中的第一个状态，使其成为默认状态。事实上，这也是您希望应用程序默认设置的

company.profile

状态的结果url

要解决此问题，取决于应用程序的用例

用例：如果应用程序将

公司

状态定义为非导航状态，则将其设置为抽象状态可以解决问题

CompanyCtrl.js

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

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

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

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

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

用例：如果

company

状态为nagivional，则只需删除

company

状态中的

url

定义，并将

company.profile

状态的

url

定义更改为

'/'

。此解决方案唯一需要注意的是，对于使用

ui sref=“company”

状态定义的任何锚定标记，将丢失

href

属性，这也意味着应用

文本

光标。为了缓解此问题，您还可以使用

指针

光标定义带有

ui sref

属性的所有

anchor

标记

CompanyCtrl.js

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

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

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

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

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

CompanyProfileCtrl.js

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

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

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

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

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

style.css

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

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

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

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

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

更新：

用例：与用例#2相同，但使

公司

状态成为抽象状态

CompanyCtrl.js

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

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

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

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

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

---

默认状态完全取决于调用的方式，向它传递一个url将应用程序转换到特定的url，其中

ui router

检测并查找它看到的第一个状态

在

main.js

配置中，将

/

url定义为应用程序的默认url，从技术上讲，它是

公司

状态的url，是父状态和子状态链中的第一个状态，使其成为默认状态。事实上，这也是您希望应用程序默认设置的

company.profile

状态的结果url

要解决此问题，取决于应用程序的用例

用例：如果应用程序将

公司

状态定义为非导航状态，则将其设置为抽象状态可以解决问题

CompanyCtrl.js

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

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

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

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

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

用例：如果

company

状态为nagivional，则只需删除

company

状态中的

url

定义，并将

company.profile

状态的

url

定义更改为

'/'

。此解决方案的唯一警告是丢失要应用于fo的

href

属性