Угловая, как перенаправить на вкладку

Question

У меня есть страница с 5 вкладками. Существует еще одна страница, содержащая ссылки, указывающие на эти вкладки. Всякий раз, когда пользователь нажимает ссылку на этой странице, соответствующая вкладка должна открываться на странице углового приложения.

Вкладка работает нормально, когда пользователь вручную нажимает на вкладку, но я не могу найти, как я могу выбрать вкладку по умолчанию.

Добавить в app.js:

$routeProvider.when('/trend', { 
    templateUrl:'partials/trend.html' 
}).when('/deepdive', { 
    templateUrl:'partials/deepdive.html' 
}).when('/driversNdrainers', { 
    templateUrl:'partials/DriversNDrainers.html' 
}).when('/timeline', { 
    templateUrl:'partials/timeline.html' 
}).otherwise("/trend"); 

индексной страницы:

<div header></div> 
<div class="row">  
<div class = "col-md-12" ng-include="'partials/home.html'"></div> 
</div> 
<div footer></div> 

Домашний контроллер создает вкладки динамически. home.html

<div class="" fade-in ng-controller="HomeCtrl"> 
<ul class="nav nav-pills"> 
    <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}" id="{{tab.id}}" 
    ng-click="setSelectedTab(tab)">{{tab.label}}</a></li> 
</ul> 
<div ng-view></div>`enter code here` 

Контроллер:

вар homectrl = myApp.controller ('HomeCtrl', [ '$ Объем', '$ routeParams', '$ местоположение', '$ state ', function ($ scope, $ routeParams, $ location, $ state) { $ scope.tabs = [ {link:' #/trend ', label:' Trend ', id: "trendLink"}, { link: '#/deepdive', label: 'Deep Dive', id: "deepdriveLink"}, {link: '#/driversNdrainers', label: 'Драйверы & Drainers ', id: "ddLink"}, {link:' #/timeline ', label:' Timeline ', id: "timelineLink"}, {link:' #/zoomin ', label:' Zoom In ' , id: "zoominLink"} ];

$scope.selectedTab = $scope.tabs[0];  

$scope.setSelectedTab = function(tab) { 
    $scope.selectedTab = tab; 
}; 

$scope.tabClass = function(tab) { 
    return $scope.selectedTab == tab? "active": ""; 
}; 
angular.element(document).ready(function() { 
    $.each($scope.tabs,function(i){ 
    if(this.link==location.hash){ 
     $scope.setSelectedTab(this); 
     //$state.go("/trend"); 
     return; 
    } 
}); 
}); 

}]);

Я вижу здесь, что вкладка выбрана, но содержимое внутри вкладки не загружено.

Answer 1

Ваш код внутри jQuery не выполняется в цикле обработки углов. Попробуйте добавить $scope.$apply(); сразу после $scope.setSelectedTab(this);

Чтобы понять, почему вы должны сделать это следующим образом: «Сфера жизненного цикла» на https://docs.angularjs.org/guide/scope