AngularJS - обновление контроллера var при изменении маршрута

Question

Я довольно много новичок в мире AngularJS. Это моя проблема. Я хотел бы обновить выбранную вкладку на основе URL-адреса, чтобы выбранная вкладка изменилась при изменении URL-адреса.

Это мои ЯШИ:

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>