$ rootScope для установки активной вкладки не работает

0

Кто-нибудь сможет мне помочь в этом вопросе, который у меня есть? У меня есть NavCtrl для управления моим активным тегом, я смог изменить активную вкладку, когда нажимаю на элемент меню, однако, когда я нажимаю на ссылку в виде тела, она возвращает меня на страницу, которую я хочу, но активна тег не изменяется.

//controller for nevigation menu
sp.controller('NavCtrl', ['$scope', 'auth', '$window','$rootScope', function ($scope, auth, $window,$rootScope) {
    $scope.LogOut = auth.logOut;
    $scope.isLoggedIn = auth.isLoggedIn;
    $scope.tab = $rootScope.navTav;

    $scope.toTop = function(){
        $window.scrollTo(0, 0);
    };
}]);

Я пытаюсь использовать $ rootScope для установки navTab, но он все еще не работает

//setting root scope
sp.run(function($rootScope) {
    $rootScope.navTav = 1;
})

UI-маршрутизатор

.state('qaanswer', {
    url: '/qa/{quesId}',
    views: {
        view50': {
            templateUrl: './qa/qaanswer.html',
            controller: 'QAAnswerCtrl'
        },
        'view60': {
            templateUrl: './shareviews/activityupdates.html',
            controller: 'HomeCtrl'
        }
    },
    onEnter:['$rootScope',function($rootScope){
        $rootScope.navTav = 5;
    }]

Большое вам спасибо за помощь

  • 0
    Можете ли вы опубликовать навигационный HTML тоже. Если вы используете $ rootScope, вам не нужно писать $ scope.tab = $ rootScope.navTav; эта линия. Вы можете просто использовать $ rootScope.tab = 1 (номер вкладки). Это может быть проблемой на вашем конце.
  • 0
    Я бы порекомендовал вам использовать $ state.include () вместо увеличения кода
Показать ещё 2 комментария
Теги:
angular-ui-router
angularjs-scope

2 ответа

0
Лучший ответ

Обновление HTML:

  <body ng-controller="NavCtrl">
    <!-- Desktop Menu -->
    <div>
      <div>
        <ul>
          <a href="#/home" ng-class="{active: navTab === 1}" ng-click="navTab = 1">
            <li>Home</li>
          </a>
          <a href="#/qa" ng-class="{active: navTab === 2}" ng-click="navTab = 2">
            <li>QA</li>
          </a>
        </ul>
      </div>
    </div>
    <div>
      <div>
        <div class="row">
          <div ui-view="view50"></div>
          <div ui-view="view60"></div>
        </div>
      </div>
    </div>
  </body>

Рабочий плунжер

Поделиться
  • 0
    Спасибо Мохану за ответ, он помог мне исправить проблему.
0

Вы можете упростить свою реализацию и не иметь проблем. Просто используйте переменную $ rootScope прямо в своем шаблоне вдоль ng-класса следующим образом:

<body ng-controller="NavCtrl">
    <a ng-class="{red: $root.navTab===0}" ui-sref="first">first</a>
    <a ng-class="{red: $root.navTab===1}" ui-sref="second">second</a>
    <div ui-view></div>
</body>

Затем обновите $ rootScope в своих контроллерах.

.controller('NavCtrl', function($scope, $rootScope) {});

.controller('FirstCtrl', function($scope, $rootScope) {
    $rootScope.navTab = 0;
});

.controller('SecondCtrl', function($scope, $rootScope) {
    $rootScope.navTab = 1;
});

Ваши государства могут оставаться относительно простыми:

.state('first', {
    url: '/first',
    templateUrl:  'first.html',
    controller: 'FirstCtrl'
})
.state('second', {
    url: '/second',
    templateUrl:  'second.html',
    controller: 'SecondCtrl'
})

plunker

В идеале вы бы сделали директиву для такой задачи и не использовали $ rootScope. Простым способом сделать это является трансляция сообщения всякий раз, когда вы приземляетесь на новую страницу, а затем слушайте это событие в своей директиве tab и переводите правильную вкладку как активную.

Поделиться
  • 0
    Привет Soote, спасибо за ответ, я уже смог изменить активное меню при нажатии на меню, но проблема в том, что если у меня есть ссылка во втором представлении, которая ссылается на 1-е представление, активное меню не изменяется из 2-го меню в 1-е меню, когда я нажимаю во 2-м виде: <a href="#/first"> вернуться к первому </a>, после нажатия на ссылку, вид переходит в 1-й вид, но меню не меняется с 2-е меню до 1-го меню. Спасибо
  • 0
    Используйте ui-sref вместо href. Мой метод работает, как и ожидалось, с изменением любого кода. Вот плункер, который меняет активное состояние при нажатии на ссылку на странице: plnkr.co/edit/GaG2C1BPxplLIGIAujvu?p=preview
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню