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

发布时间：2020-12-17 07:52:19 所属栏目：安全来源：网络整理

导读：我正在使用 AngularUI Router,我正在尝试嵌套/子链接. 一切正常,但我如何在联系人选项卡中选择/激活链接？基本上,我需要能够在加载联系页面时选择/主动联系一个链接.目前它不会因某种原因读取controlleroneCtrl,除非我点击链接联系一个. angular .module ('

我正在使用 AngularUI Router,我正在尝试嵌套/子链接.

一切正常,但我如何在联系人选项卡中选择/激活链接？

基本上,我需要能够在加载联系页面时选择/主动联系一个链接.目前它不会因某种原因读取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'
          });

      }]);

Plunker：http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview

有一个更快的方法来做到这一点.只需使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!