AngularJS - ルート変更時のコントローラのアップデート012

Question

私はAngularJSの世界ではかなり初心者です。 これは私の問題です。 URLに基​​づいて選択したタブを更新して、URLが変更されたときに選択したタブが変更されるようにしたいと思います。

これは私のjsです：

app.config(function($routeProvider, $locationProvider){ 
     $routeProvider 
     .when('/page1', { 
      templateUrl: '/views/pages/page1.html', 
      controller: "TabController", 
      tab: 1 
     }) 
     .when('/page2', { 
      templateUrl: '/views/pages/page2.html', 
      controller: "TabController", 
      tab: 2 
     }) 
     .otherwise({ 
      template: "Error 404" 
     }); 

     $locationProvider.html5Mode({enabled: true, requireBase: false}); 
    }); 

    //Tabs 
    app.controller("TabController", function($scope, $route){ 
     $scope.activeTab = 0; 

     if(typeof $route.current != "undefined"){ 
     setTimeout(function(){$scope.activeTab = $route.current.activeTab; console.log($scope.activeTab);},100); 
     } 
    }); 

そして、これは私のhtmlです：

<div ng-controller="TabController"> 
    <!-- Tabs --> 
    <section class="section section--xs"> 
    <div class="container"> 
     <div class="tab"> 
     <div class="tab__single" ng-class="{active: activeTab === 1}"> 
      <a href="/page1" class="tab__single__name">Page 1</a> 
     </div> 
     <div class="tab__single" ng-class="{active: activeTab === 2}"> 
      <a href="/page2" class="tab__single__name">Page 2</a> 
     </div> 
     </div> 
    </div> 
    </section> 
    <!-- ./tabs --> 

    <!-- Content --> 
    <ng-view></ng-view> 
    <!-- ./content --> 
</div> 

それが正しい値を記録しますので、私は試してみて、私はタブ値を記録した場合、それが実際に更新し、新しいタブは選択されません。助言がありますか？

Answer 1

あなたのURLパラメータで検索する機能を作成することができます。

$scope.isActive = function (viewLocation) { 
    return viewLocation === $location.path(); 
}; 

HTML：

<div class="tab"> 
     <div class="tab__single" ng-class="{active: isActive('page1')}"> 
      <a href="/page1" class="tab__single__name">Page 1</a> 
     </div> 
     <div class="tab__single" ng-class="{active: isActive('page2')}"> 
      <a href="/page2" class="tab__single__name">Page 2</a> 
     </div> 
     </div>