一尘不染

AngularUI路由器中的活动链接/选项卡

angularjs

我正在使用AngularUI路由器,并且试图建立嵌套/子链接。

一切正常,但是如何在“联系人”选项卡中选择/激活链接?

基本上,我需要能够在加载“联系人”页面时选择/激活一个联系人链接。当前,由于某些原因,controlleroneCtrl除非我单击链接,否则它不会阅读。

angular
    .module ('myApp', ['ui.router'
  ])
    .config (['$urlRouterProvider', '$stateProvider',  function ($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise ('/summary');

        $stateProvider.
            state ('summary', {
            url: '/summary',
            templateUrl: 'summary.html',
            controller: 'summaryCtrl'
          }).
            state ('about', {
            url: '/about',
            templateUrl: 'about.html',
            controller: 'aboutCtrl'
          }).
            state ('contact', {
            url: '/contact',
            templateUrl: 'contact.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.one',{
            url: '/contact.contactone',
            templateUrl: 'one.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.two',{
            url: '/contact.contacttwo',
            templateUrl: 'two.html',
            controller: 'contacttwoCtrl'
          });

      }]);

柱塞:http
://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview


阅读 217

收藏
2020-07-04

共1个答案

一尘不染

有一种更快的方法可以做到这一点。只需使用ui-sref-active="active"属性而不是即可ui-sref

一个例子:

<ul>
    <li ui-sref-active="active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

当状态为活动时,列表项将激活该类。如果要为活动状态使用不同的类或一个以上的类,只需按如下所示添加它

<ul>
    <li ui-sref-active="active so-active super-active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>
2020-07-04