如何在子项发生变化时使父项李处于活动状态

How to make parent li active when the child changes

本文关键字：活动状态 李处于 变化      更新时间：2023-09-26

我是ui路由器和angularjs的新手。我面临的问题是

在我的标题中

<li   ng-class="{active: $state.includes('settings')}" id="header01">                
 <a  ui-sref="settings.personal"> <span id="header02" > Settings</span> </a>    
 </li>

在我的main.js中，我有-

$stateProvider.state("settings",{
abstract: true,
      url: '/Settings',

      templateUrl: 'Settings/settings.html',
 resolve: {
      },

      controller: ['$scope', '$state', 'contacts', 'utils',
        ]
});


$stateProvider.state("settings.personal",{
url:'/Personal',
controller: "settingPersonal",
templateUrl: "Settings/personal.html"
});
$stateProvider.state("settings.additional",{
url:'/Additional',
controller: "settingPersonal",
templateUrl: "Settings/Additional.html"
});
$stateProvider.state("settings.reset",{
url:'/ResetPass',
controller: "myCtrl2 as second",
templateUrl: "Settings/password_reset.html"
});

现在，当我从个人选项卡更改为任何其他选项卡时，标题中的设置将变为非活动状态。如何解决这个问题。

谢谢。

一种方法是使用state.data，例如：

.state('settings', {
  url: '/settings',
  templateUrl: 'settings/settings.html',
  data: {
    pageTitle: 'Settings'
  }
})

然后在您的视图中，您可以访问$state.current.data:

<li ng-class="{active: $state.current.data.pageTitle('Settings')}">
  <a ui-sref="settings">Settings</a>
</li>
<li ng-class="{active: $state.current.data.pageTitle('About')}">
  <a ui-sref="settings">About</a>
</li>

但就我个人而言，我可能会将导航项放在ng重复中，并使用state.data动态创建页面标题/类，以避免对页面标题进行硬编码。

相关文章：