这是我使用ui.router初始实现的ui.bootstrap选项卡:
<tabset>
<tab heading="Tab1" select="$state.go('home.tab1')">
<div ui-view="forTab1"></div>
</tab>
<tab heading="Tab2" select="$state.go('home.tab2')">
<div ui-view="forTab2"></div>
</tab>
</tabset>
非常简单,它主要起作用,但它有几个问题.
首先,如果我在浏览器中输入URL,它就不起作用,例如".../home/tab1".我认为的问题是,虽然ui.router可能路由到正确的视图,但它不知道选择该视图的选项卡.
其次,如果我尝试将页面保留在不同页面上的状态,则会触发选项卡逻辑中的明显错误.当标签集被销毁时,它会逐个销毁标签.当它破坏当前选定的选项卡时,它似乎运行的逻辑与仅在该选项卡被销毁时运行的逻辑相同,而不是整个选项卡集.这导致它选择其中一个尚未销毁的选项卡,这使得ui.router进入该选项卡的状态,这阻止我离开页面.(修复程序可能应该是在销毁过程中销毁标签集不应该选择任何标签.)
第三,一些选项卡视图可能很复杂,在构建期间会有许多服务器命中.每次从一个标签切换到另一个标签时,我都不想破坏它们并重新创建它们.我更倾向于在首次选择该选项卡时创建选项卡视图,然后一直持续到我离开页面.选择以前查看的选项卡应该只是再次显示它,而不是重新创建它.
所以,看起来我需要更复杂和更复杂的东西,但是什么呢？在此先感谢您的任何建议.
更新:ui.router常见问题解答对如何实现标签有疑问.它指向一个看似有希望的"额外"包.希望有一种方法可以与ui.bootstrap标签集成.http://christopherthielen.github.io/ui-router-extras/#/sticky
更新:这里有两个实现更好但仍然不太正确的实现.第一个使用ui.bootstrap选项卡:
<tabset>
<tab heading="Products" ui-sref=".products" active="$state.includes('home.products')"></tab>
<tab heading="Users" ui-sref=".users" active="$state.includes('home.users')"></tab>
</tabset>
<div ui-view="home.products" ng-show="$state.includes('home.products')"></div>
<div ui-view="home.users" ng-show="$state.includes('home.users')"></div>
第二个是基于来自Chris Thielen的sticky-tabs示例的top.html:
<div class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li ng-class="{active: $state.includes('home.products')}" ><a ui-sref="home.products">Products</a></li>
<li ng-class="{active: $state.includes('home.users')}" ><a ui-sref="home.users">Users</a></li>
</ul>
</div>
<div class="tabcontent well-lg" ui-view="home.products" ng-show="$state.includes('home.products')" class="col-sm-6"></div>
<div class="tabcontent well-lg" ui-view="home.users" ng-show="$state.includes('home.users')" class="col-sm-6"></div>
这两个都避免了我上面的前两个问题 - 通过URL工作转到选项卡,我可以离开页面而不触发标签销毁bug(可能是因为我没有使用"select =").
但是,仍然存在问题,两种版本都会出现问题.home.users模板有一个ui-grid,如果我首先转到选中该选项卡的页面,则网格为空.我可以看到客户端从服务器请求网格数据,但它没有显示它.如果我转到另一个选项卡并返回,则显示数据(重新获取后).更糟糕的是,这意味着我无法使home.users状态变粘,因为它会陷入无数据显示模式.
我正在尝试使用AngularJS ngDialog附加组件来创建一个简单的弹出对话框.它基本上可以工作,但是当对话框出现时,它会以白色开始,然后快速淡入深色背景.我假设有一些CSS冲突,但我可以通过下面的一个非常简单的HTML重现问题.在此先感谢您的任何建议.
<html>
<head>
<title>Dialog Test</title>
<link href='/assets/ngDialog/css/ngDialog.css' rel='stylesheet'>
<script src='/assets/angularjs/angular.js'></script>
<script src='/assets/ngDialog/js/ngDialog.js'></script>
<script>
angular.module('dialogTest', ['ngDialog']);
</script>
</head>
<body ng-app='dialogTest'>
<button ng-dialog='MY_DIALOG.html'>
Dialog...
</button>
</body>
</html>
我希望结果看起来像这样：
auto foo = FooBuilder()
.WithSomething()
.WithSomethingElse()
.Build();
但改为这样clang-format格式化：
auto foo = FooBuilder()
.WithSomething()
.WithSomethingElse()
.Build();
我希望链式调用相对于上一行的开始而不是相对于FooBuilder()调用缩进。我在clang-format控制此的选项中看不到任何东西。设置ContinuationIndentWidth无济于事。有任何想法吗？