[英]How to make UI-Router open a tab
I have a link on the first page and when clicked on that link; 我在第一页上有一个链接,当单击该链接时; it goes to second page.
转到第二页。 I have two tabs on that second page.
我在第二页上有两个标签。 I want to make the second tab active and user should directly see the contents of that tab.
我想激活第二个选项卡,用户应该直接看到该选项卡的内容。
I have tried using ui-sref but it only takes me to second page. 我曾尝试使用ui-sref,但仅将我带到第二页。 Here's my code:
这是我的代码:
First Page: 第一页:
<a class="modal-trigger" ui-sref=""manage_schedule({'tab' : 'current'})">
<div class="card-action" id="clients-bar">
More Details
</div>
</a>
Controller: 控制器:
$stateProvider
.state('manage_schedule', {
url : "/manage/schedules/:tab",
templateUrl : "/static/manage_schedule.html",
})
manage_schedule.html manage_schedule.html
<div ng-controller="ManageSchedule">
<div class="tabslayout rules">
<ul class="tabs">
<li class="tab col s4" ng-click="getPastRuns(profile_log_url)">
<a href="#pastschedular" ng-class="{'active' : selectedTab=='past'}">
Past Runs({{runDetails.past_total}})
<i class="material-icons refresh-center" ng-if="selectedTab=='past'">refresh</i>
</a>
</li>
<li class="tab col s4" ng-click="getRunningSchedules(running_schedules)">
<a href="#runningschedular" ng-class="{'active' : selectedTab=='current'}">
<i class="material-icons refresh-center" ng-if="selectedTab=='current'">refresh</i>
Currently Executing Runs ({{runDetails.current_total}})
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("ul.tabs").tabs({});
});
</script>
Router 路由器
$stateProvider
.state('manage_schedule', {
url: "/manage/schedules/:tab",
templateUrl: "/static/manage_schedule.html",
controller: "ManageSchedule"
});
HTML HTML
<div>
<div class="tabslayout rules">
<ul class="tabs">
<li class="tab col s4" ng-click="getPastRuns(profile_log_url)">
<a href="#pastschedular" ng-class="{'active' : selectedTab=='past'}">
Past Runs({{runDetails.past_total}})
<i class="material-icons refresh-center" ng-if="selectedTab=='past'">refresh</i>
</a>
</li>
<li class="tab col s4" ng-click="getRunningSchedules(running_schedules)">
<a href="#runningschedular" ng-class="{'active' : selectedTab=='current'}">
<i class="material-icons refresh-center" ng-if="selectedTab=='current'">refresh</i>
Currently Executing Runs ({{runDetails.current_total}})
</a>
</li>
</ul>
</div>
</div>
ManageSchedule Controller ManageSchedule控制器
controller('ManageSchedule', function ($scope, $stateParams) {
$("ul.tabs").tabs({
active: $stateParams.tab === "current" ? 1 : 0
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.