Angularjs导航菜单,带有UI引导选项卡和UI路由器
Angularjs navigation menu with UI-Bootstrap tabs and UI-Router
在这个Plunker中,我无法使菜单链接和选项卡正常工作。正如你所看到的,我需要点击两次"路线1"才能从选项卡"路线2"返回,此外,当我点击两次‘路线2’菜单链接时,选项卡内容不会呈现。
我认为这是代码中重要的相关部分:
myapp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('route1', {
url: "/",
templateUrl: "route1.html"
})
.state('DocumentoMasterView', {
url: "/route2",
templateUrl: "route2.html",
controller: 'myAppController'
})
.state('DocumentoMasterView.A', {
url: '/detail',
templateUrl: 'route2.A.view.html',
controller: 'myAppController'
})
.state('DocumentoMasterView.B', {
url: '/image',
templateUrl: 'route2.B.view.html',
controller: 'myAppController'
})
.state('DocumentoMasterView.C', {
url: '/submenu',
templateUrl: 'route2.C.view.html',
controller: 'myAppController'
})
});
myapp.controller('myAppController',['$scope','$state',function($scope, $state){
$scope.tabs = [
{ heading: 'A View', route:'DocumentoMasterView.A', active:true},
{ heading: 'B View', route:'DocumentoMasterView.B', active:false },
{ heading: 'C View', route:'DocumentoMasterView.C', active:false }
];
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.$on('$stateChangeSuccess', function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
我做了这个更改以使该示例工作(请在此处查看)
在这种情况下,我们不需要状态更改
// instead of this
$scope.go = function(route){
$state.go(route);
};
$scope.$on('$stateChangeSuccess', function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
我们应该处理所有选项卡上的选择
// use just this
$scope.go = function(t){
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(t.route);
});
$state.go(t.route);
};
在这里查看
同时,尝试重新考虑将<div ng-controller="myAppController">
和ui路由器一起使用。它可以工作,但有了状态,你可以更有效地定义所有部分。
在这里,我试图展示如何…没有ng控制器,父布局状态。。。
Radim的答案很好,但这是一个过时/臃肿的方法。ui路由器具有活动状态,可以从视图更改所有这些css和状态,而不是在控制器中具有逻辑。
在您的导航中:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
</ul>
就这样!您当前的活动状态/视图将ui sref active="active"类应用于该li元素。其中"active"是应用的类名。
对于您的特定导航,它看起来像这样:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
<li ui-sref-active="active" class="item">
<a href ui-sref="DocumentoMasterView">DocumentoMasterView</a>
</li>
<li ui-sref-active="active" class="item">
<a href ui-sref="DocumentoMasterView.A">DocumentoMasterView.A</a>
</li>
<li ui-sref-active="active" class="item">
<a href ui-sref="DocumentoMasterView.B">DocumentoMasterView.B</a>
</li>
<li ui-sref-active="active" class="item">
<a href ui-sref="DocumentoMasterView.C">DocumentoMasterView.C</a>
</li>
</ul>
相关文章:
- 访问url[材质Ui+选项卡]时,Angular Ui路由器未加载视图
- jQuery UI 选项卡取消选择事件或在选择时保存上一个选项卡
- jQuery bxSlider 和 jQuery-ui 选项卡
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- WordPress + JQuery UI 选项卡 + 动态更改选项卡的宽度
- 如何在分页期间链接回特定的jquery ui选项卡
- 如何使用jQuery UI选项卡中的锚点关闭该选项卡
- jQuery UI选项卡基于活动选项卡显示/隐藏图像
- JQuery UI选项卡闯入安全(https)页面
- Jquery UI选项卡-根据输入字段值,使用“下一步”/“上一步”按钮推进选项卡
- Jquery UI选项卡&选择方框-下一个/上一个按钮
- jQuery UI选项卡不起作用
- jQuery UI选项卡中的jQuery DataTables
- jQuery UI选项卡:在选项卡中加载链接/重新加载整个页面
- 在jQuery UI选项卡中显示WordPress插件设置
- 如何在两个 jquery ui 选项卡中使用弹性滑块
- Jquery-UI 选项卡列表
- 带有 d3 的嵌入式 Google 地图.js叠加层显示 UI 选项和叠加元素,但不是地图本身
- 在 JQuery UI 选项卡中解析选定的面板索引时出错
- 有没有办法重定向使用 JQuery UI 选项卡加载的内容