css - 如何避免宽度计算,这可以只用 CSS 来完成吗?

标签 css angularjs directive

参见 http://plnkr.co/edit/xqYBnz5BHLP844kXJXKs?p=preview

查看工作版本:http://bkuhl.github.io/angular-form-ui/#!/slide-toggle

这里发生的是当 Angular 处理指令时有一个宽度计算。但是,该元素不可见,因此它没有宽度。此 slider 上显示的标签是可自定义的,因此虽然它默认为开/关,但它可以是任何东西。这意味着 slider 宽度需要完全可变。

是否可以更改此 slider 的 CSS 以避免宽度计算?

最佳答案

不确定在任何情况下都可以,但是在你的 plunker 中用 ng-if 替换 ng-show 就可以了(不需要额外的 css/js)。

请看这里:http://plnkr.co/edit/dghyemUuBMfbIPgLJHPz?p=preview

它与 ng-if 一起工作,因为在条件评估为真之前不会调用该指令。从这里父 dom 元素可见并且宽度计算成功。另一方面,在 ng-show 的情况下,指令被直接调用,因为它的父 dom 元素是隐藏的 (display:none;),宽度计算将“失败”。

仅供引用,ng-if 可用于 Angular 1.1.5 及更高版本。

关于css - 如何避免宽度计算,这可以只用 CSS 来完成吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18803445/

相关文章:

html - 搜索栏未显示在页面上

javascript - chart.js v2 "right to left"工具提示 (RTL)

AngularJS:通过 Websocket 发送身份验证 header

jquery - Bootstrap selectpicker VueJS 指令

javascript - 在固定位置的 div 中滚动

html - 向右浮动就是向左浮动?

javascript - 无法读取旁边未定义的属性 'length'

javascript - 数据绑定(bind)到 Angular 中数组的特定项

delphi - {$C PRELOAD} 指令的含义是什么?

Angular 4 - 如何在模糊时调用自定义验证器?