小编cns*_*enj的帖子

AngularJS多元素指令

AngularJS支持带有-start-end后缀的多元素指令.官方文档仅提及ng-repeat-startng-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指令吗?如果有,怎么样?

javascript angularjs angularjs-directive

5
推荐指数
1
解决办法
6660
查看次数

禁用 HTML 链接悬停颜色

如果我有一个<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)

更新 我忘了提到我确实设置了全局aa: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)

html css

4
推荐指数
1
解决办法
2万
查看次数

反应延迟渲染

假设我有一个用React编写的制表符控件组件.只有活动选项卡才会呈现以获得更好的性能(如果我渲染所有选项卡,则需要5秒钟,因为大约有20个选项卡,每个选项卡包含大量数据).单击它们以激活它们时,将呈现其他选项卡.

除了一个标签之外,这非常有效.特殊选项卡比其他选项卡大得多,它包含一个包含2000行的表,因此React需要3秒才能呈现它.这使得用户体验非常糟糕:单击选项卡,3秒钟没有任何反应,因为React忙于渲染,然后突然出现大表.

没有React,我通常这样做:

  1. 在新的活动选项卡中放置一些加载指示器
  2. 切换到新的活动选项卡
  3. setTimeout(render(), 50);

由于实际渲染发生在50ms之后,浏览器有足够的时间来更新UI.用户点击后会立即看到新的活动标签,并且新的活动标签中有一个加载指示器,现在等待3秒更容易接受.

使用React,React框架调用render()方法,是否可以执行类似于步骤3的操作?

我知道我可以用分页表替换巨大的表,因此只会有限数量的行同时呈现.但我的问题集中在处理需要大量渲染时间的UI组件.

render delay reactjs

2
推荐指数
1
解决办法
1万
查看次数

少多个直系子节点

预期的 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)

siblings less

0
推荐指数
1
解决办法
396
查看次数