Как сделать родительский ли активным, когда ребенок меняется

Question

Как сделать родительский ли активным, когда ребенок меняется

0

Я новичок в 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"
});

Теперь, когда я перехожу от персональной к любой другой вкладке, настройки в заголовке становятся неактивными. Как это решить.

Спасибо.

Ansh Agarwal 02 июль 2015, в 13:52

Источник

Теги:

javascript

angularjs

angular-ui-router

1 ответ

Ещё вопросы

Tony Barnes · Answer 1 · 2015-07-02T09-13-00.000Z

Один из подходов - использовать 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, чтобы избежать заголовков страниц с жестким кодированием.

Это не лучший способ, хотя. Можете ли вы предложить лучший способ сделать это
@AnshAgarwal Да, я думаю, что этот подход хорош, если у вас есть только несколько предметов. Было бы лучше, если бы это работало с ng-repeat. Я посмотрю.