Question

我有一个标签列表，我想知道每次点击特定标签时我的当前位置，我希望我的MainCTRL是所有标签控制器的父亲，知道哪个标签现在处于活动状态。我试图使用ng-click事件并使用$ location.path（）这样的服务来获取当前路径。但首先我得到的是前一条路径而不是当前路径。我添加了下面的代码用于演示和codepen： http://codepen.io/Barak/pen/wGPpoZ

为什么我需要这样的功能，因为我希望标题的某些常用按钮对特定的选项卡组禁用，并且对标签的其他部分有效。

var app = angular.module('app',[]);

app.controller("MainCTRL",["$scope","$location", function($scope,$location){
    $scope.title = "Hello World";
    $scope.onWhichPageIAM = function(){
      console.log("He click me");
      console.log("location:",$location.path());
      
      }
  
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<nav id="tabs_navbar" class="navbar-collapse collapse" ng-app="app" ng-controller="MainCTRL">
    <ul class="tabs">
        <li class="tabs-item">
            <a href="#/AnalyticsSummary" class="tabs-link">Analytics Summary</a>
        </li>
        <li class="tabs-item">
            <a href="#/TDCG" class="tabs-link" ng-click="onWhichPageIAM();">TDCG</a>
        </li>
        <li class="tabs-item">
            <a href="#/keygas" class="tabs-link" ng-click="onWhichPageIAM();">Key Gas</a>
        </li>
        <li class="tabs-item">
            <a href="#/DuvalTriangle" class="tabs-link" ng-click="onWhichPageIAM();">Duval Triangle</a>
        </li>
        <li class="tabs-item">
            <a href="#/DuvalPentagon" class="tabs-link" ng-click="onWhichPageIAM();">Duval Pentagon</a>
        </li>
        <li class="tabs-item">
            <a href="#/NEI" class="tabs-link" ng-click="onWhichPageIAM();">NEI</a>
        </li>
        <li class="tabs-item">
            <a href="#/PTX" class="tabs-link" ng-click="onWhichPageIAM();">PTX</a>
        </li>
        <li class="tabs-item">
            <a href="#/GasTrends" class="tabs-link" ng-click="onWhichPageIAM();">Gas Trends</a>
        </li>
        <li class="tabs-item">
            <a href="#/DataTable" class="tabs-link" ng-click="onWhichPageIAM();">Data Table</a>
        </li>
        <li class="tabs-item">
            <a href="#/Playground" class="tabs-link" ng-click="onWhichPageIAM();">Playground</a>
        </li>
        <li class="tabs-item">
            <a href="#/AnalyticsSettings" class="tabs-link" ng-click="onWhichPageIAM();">Analytics Settings</a>
        </li>
    </ul>
</nav>

Answer 1

无需点击，您可以使用$routeChangeSuccess上广播的$rootScope（@Daniel Beck建议）信号，使用它如下：

app.controller("MainCTRL",['$rootScope', "$scope","$location", function($rootScope, $scope,$location){
  $rootScope.$on('$routeChangeSuccess', function(ev, current, previous) {
    console.log("State change success");
    console.log("location:", current); // info referent to the current state.
  });
}]);

Answer 2

您可以使用$state变量获取有效标签。

<div class="btn-group">
        <button class="btn btn-primary btn-sm" uib-btn-radio="'mytabs'" ui-sref-active="active" ng-model="ActiveChild" ui-sref="tab1">FirstTab</button>
        <button class="btn btn-primary btn-sm" uib-btn-radio="'mytabs'" ui-sref-active="active" ng-model="ActiveChild" ui-sref="tab2">SecondTab</button>

</div>

在控制器中使用$scope.ActiveChild = $state.current.name;。

$state.current.name;应该为您提供有效标签的名称。

如何知道我现在在哪个页面

2 个答案: