如何在孩子改变时使父母李活跃

时间:2015-07-02 11:23:46

标签: javascript angularjs angular-ui-router

我是ui router和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"
});

现在,当我从个人标签更改为任何其他标签时,标题中的设置将变为非活动状态。怎么解决这个问题。

谢谢。

1 个答案:

答案 0 :(得分:0)

一种方法是使用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-repeat中,并使用state.data动态创建页面标题/类,以避免硬编码页面标题。