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

有人能帮我解决这个问题吗?我有一个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-Router

.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:

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

工作恰好

您可以简化您的实现而没有任何问题。只需在模板中直接使用$rootScope变量和ng-class，如下所示:

<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'
})

砰砰作响

理想情况下，你应该为这样的任务创建一个指令，并避免使用$rootScope。要做到这一点，一个简单的方法是每当你登陆一个新页面时广播一条消息，然后在标签指令中监听该事件，并将正确的标签翻转为活动。

相关内容

最新更新

热门标签：