$rootScope 设置活动选项卡不起作用答案

【问题标题】：$rootScope to set active tab not working$rootScope 设置活动选项卡不起作用
【发布时间】：2015-08-22 01:53:58
【问题描述】：

有人能帮我解决我遇到的这个问题吗？我有一个用于管理我的活动标签的 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 设置导航选项卡，但它仍然无法正常工作

//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;
    }]

非常感谢您的帮助

【问题讨论】：

你也可以发布导航html。如果你使用的是 $rootScope 那么你不需要写 $scope.tab = $rootScope.navTav;这条线。你可以简单地使用 $rootScope.tab = 1(tab number)。这可能是你的问题。
我会建议你使用 $state.includes() 而不是增加代码
你好 Mohan，我已经把我的示例问题放在 plunker 上，你能看一下吗？ plnkr.co/edit/pkGgEFhG2FJNWT7xDfb4?p=preview谢谢
好的，让我看看

标签： javascript angularjs angularjs-scope angular-ui-router

【解决方案1】：

更新 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>

Working plunker

【讨论】：

感谢 Mohan 的回复，它帮助我解决了这个问题。

【解决方案2】：

您可以简化实施并且没有任何问题。只需在模板中直接在 ng-class 旁边使用 $rootScope 变量，如下所示：

<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。一种简单的方法是在您进入新页面时广播一条消息，然后在您的标签指令中监听该事件并将正确的标签翻转为活动状态。

【讨论】：

您好 Soote，感谢您的回复，我已经能够在单击菜单时更改活动菜单，但问题是如果我在第二个视图中有一个引用第一个的链接查看，当我在第二个视图中单击时，活动菜单不会从第二个菜单更改为第一个菜单：返回第一个，单击链接后视图转到第一个查看但菜单不会从第 2 个菜单更改为第 1 个菜单。谢谢
使用 ui-sref 代替 href。我的方法在更改任何代码时都按预期工作。这是一个当点击页面上的链接时改变活动状态的 plunker：plnkr.co/edit/GaG2C1BPxplLIGIAujvu?p=preview
您好 Soote，感谢您的评论，我已经按照您的示例进行操作，但仍然无法使其正常工作，您能看看这个 plnker 吗？ plnkr.co/edit/pkGgEFhG2FJNWT7xDfb4?p=preview谢谢
在您的 index.html 文件中，您需要在 ng-class 中调用 $root.navTab，而不是 navTab。