我应该在 Angular 指令中使用单个对象还是单个值作为属性？

Question

这是一个 'best practices' 的问题，但我仍然认为可能会有正确答案。

我有一个包含六个可配置选项的指令。我应该在指令上设置六个不同的属性吗（如下所示）：

<my-directive
  my-width="300"
  my-height="300"
  my-status="true"
  my-foo="yes"
  my-bar="no">
</my-directive>

或者，我是否应该将配置对象传递到单个属性中（如下所示）：

<my-directive my-options="options"></my-directive>

这只是偏好还是有普遍偏好的方法？任何反馈表示赞赏。谢谢:)

Answer 1

这是主要偏好问题。既然两条路都能达到最终的结果。为了处理冗长、富有表现力的元素，我个人更喜欢查看第一个示例中建议的各个属性。

只需查看您的第一个示例中的 <my-directive my-width="300" my-height....>，我就可以对该指令的用途做出有根据的猜测，并且可以轻松地拼凑出正在发生的事情。只是看到 my-options="options"，除非我通过一些代码来理解这个元素的意图，否则我不知道。

不过，作为一个项目的单个开发人员，这可能是一个低优先级的考虑因素 - 通常被记为 "well, whats the difference?"，但是当您介绍使用相同代码库的其他成员时，冗长的内容可能会减轻理解您的意图的困难，尤其是对于不熟悉 AngularJS.

的开发人员

就技术优势而言，例如您希望仅将样式规则应用于属性包含 my-foo 的元素。这对于 css 选择器和以下

变得微不足道

[my-foo="yes"] {
    background-color: dodgerblue;
}

[my-foo="no"] {
    background-color: tomato;
}

另一个简单的例子 - 假设你的项目中有 jQuery 并且希望做类似

的事情

$("[my-bar='no']") // do whatever

用另一条路线完成这些任务可能会很棘手。考虑这个真实的例子：用户体验设计师想要利用这些操作，但是据说，对 AngularJS 不是很精通 - 这些任务变得不必要地痛苦。

当您开始考虑诸如此类的方面和示例时，对您的元素进行粒度控制变得非常宝贵。对于您最初提出这个问题的兴趣，肯定每个人都可以理解将其合并为 my-options="options" 之类的简洁内容的愿望 - 但争取更短的代码并不总是有利的。

综合考虑，两者的结合可能是理想的，这取决于您正在使用的属性的感知重要性。 height、width、status？ - 可能重要且描述性足以独立。一个复杂的统计对象，有很多字段用于指令处理？ - 可能有资格保留对象。

我应该在 Angular 指令中使用单个对象还是单个值作为属性？

Should I use a single object or individual values as attributes in an Angular directive?

html

javascript

attributes

angularjs

angularjs-directive