AngularJS支持带有-start和-end后缀的多元素指令.官方文档仅提及ng-repeat-start和ng-repeat-end.其他内置指令是否支持此功能?
例如,这工作正常:
<tbody>
<tr ng-controller="myController">
<td>{{firstName}}</td>
<td>{{lastName}}</td>
</tr>
</tbody>
Run Code Online (Sandbox Code Playgroud)
这两个{{firstName}}和{{lastName}}被替换为它们应有的价值.
但这只能部分起作用:
<tbody>
<tr ng-controller-start="myController">
<td>{{firstName}}</td>
</tr>
<tr ng-controller-end>
<td>{{lastName}}</td>
</tr>
</tbody>
Run Code Online (Sandbox Code Playgroud)
{{firstName}}被正确替换.但是{{lastName}}空的.由于{{firstName}}作品,似乎ng-controller-start被AngularJS认可.这是一个错误,或者我做错了,那{{lastName}}是行不通的?
更新
如果ng-controller-start并且ng-controller-end未得到官方支持.如何ng-controller跨越多个元素?我可以使用comment-style指令吗?如果有,怎么样?
如果我有一个<div>,我可以像这样控制它的颜色:
<div class="good">Hello</div>
.good { color: green; }
Run Code Online (Sandbox Code Playgroud)
我想对链接做同样的事情,就像这样:
<a href="...", class="good">Hello</a>
.good { color: green; }
Run Code Online (Sandbox Code Playgroud)
我希望链接是绿色的,即使发生鼠标悬停,如<div>. 我知道我可以这样做:
.good:hover { color: green; }
Run Code Online (Sandbox Code Playgroud)
但这意味着我必须记住为每个可能应用于<a>元素的类添加它。有没有一种简单的方法可以禁用悬停颜色更改<a>?我正在考虑类似的事情:
a:hover { color: do-not-change; }
Run Code Online (Sandbox Code Playgroud)
或者:
a:hover { color: inherit-from-non-hover; }
Run Code Online (Sandbox Code Playgroud)
更新
我忘了提到我确实设置了全局a并a:hover覆盖了浏览器默认值:
a, a:hover { color: black; text-decoration: none; }
Run Code Online (Sandbox Code Playgroud)
这是因为我不知道如何禁用悬停颜色。理想情况下,我想要的是:
a { color: black; }
a:hover { color: <some way to tell it to not change>; }
.good { color: green; …Run Code Online (Sandbox Code Playgroud) 假设我有一个用React编写的制表符控件组件.只有活动选项卡才会呈现以获得更好的性能(如果我渲染所有选项卡,则需要5秒钟,因为大约有20个选项卡,每个选项卡包含大量数据).单击它们以激活它们时,将呈现其他选项卡.
除了一个标签之外,这非常有效.特殊选项卡比其他选项卡大得多,它包含一个包含2000行的表,因此React需要3秒才能呈现它.这使得用户体验非常糟糕:单击选项卡,3秒钟没有任何反应,因为React忙于渲染,然后突然出现大表.
没有React,我通常这样做:
setTimeout(render(), 50);由于实际渲染发生在50ms之后,浏览器有足够的时间来更新UI.用户点击后会立即看到新的活动标签,并且新的活动标签中有一个加载指示器,现在等待3秒更容易接受.
使用React,React框架调用render()方法,是否可以执行类似于步骤3的操作?
我知道我可以用分页表替换巨大的表,因此只会有限数量的行同时呈现.但我的问题集中在处理需要大量渲染时间的UI组件.
预期的 CSS:
.parent > .type1 {
color: red;
}
.parent > .type2 {
color: red;
}
.parent > .type3 {
color: red;
}
Run Code Online (Sandbox Code Playgroud)
原来的少:
.parent {
& > .type1, & > .type2, & > .type3 {
color: red;
}
}
Run Code Online (Sandbox Code Playgroud)
如何组合type1/type2/type3?这不起作用,因为 type2/type3 将被编译为后代,而不是直接子代:
.parent {
& > .type1, .type2, .type3 {
color: red;
}
}
Run Code Online (Sandbox Code Playgroud)