angularjs - 指令 md-whiteframe 和 css 类 md-whiteframe 之间的区别

Question

我正在试验 Angular Material 框架，并且非常享受每一个功能!我真的很喜欢 md-whiteframe 指令来提升某些容器。但是，我注意到有不同的使用方式。

Angular Material Documentation将其用作指令:

<div md-whiteframe="2">
    <span>I'm elevated!</span>
</div>

虽然很多示例将其用作 CSS 中的类:

<div class="md-whiteframe-z2">
    <span>I'm elevated!</span>
</div>

文档还指定 md-whiteframe 可以提升到 24dp，而“类版本”只能达到 4 个不同的级别。

两种方法有什么区别？什么时候应该使用指令或 CSS 类？

我认为差异来自“类版本”的 Material Design Lite CSS 库，而指令版本仅适用于 Angular Material。但我没有找到可以证实这一点的消息来源......

Answer 1

其实很简单。属性指令 md-whiteframe添加 .md-whiteframe-z<x>类到元素。所以，我想你可以同时使用两者。哪个取决于您是否愿意或不使用 JavaScript 向元素添加类。

使用 JS 和指令的优点也是对 dp 进行验证。值(value)。当然，这是一个很好的抽象，因为类名可能会更改，但您的指令 API 不会。