Question

任何人都可以帮我解决这个问题吗？我有一个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;
    }]

非常感谢您的帮助

Answer 1

您可以简化实施并且没有任何问题。只需在你的模板中直接使用$ rootScope变量，就像这样：

public class MyModel implements Parcelable{

private String rollNumber;
private String name;
private String mark;

public void setRollNumner(String rollNumber){
this.rollNumber = rillNumber;
}
.....

}

然后在控制器中更新$ 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>

你的州可以保持相对简单：

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

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

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

plunker

理想情况下，您可以为此类任务制定指令，并避免使用$ rootScope。一种简单的方法是在您登陆新页面时广播消息，然后在tab指令中监听该事件并将正确的选项卡翻转为活动状态。

Answer 2

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

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

2 个答案: