AngularJS指令侧栏菜单的设计模式

Question

我正在使用angularJS创建一个简单的侧边菜单。我的指令设计有以下两个选项，但无法确定哪个更好：

选项1

HTML标记：

<sidebar title="Sidebar Heading">
  <sidebar-element name="Heading">Description</sidebar-element>
  ...
</sidebar>

选项2

HTML标记：

<sidebar>Sidebar Heading</sidebar>

而且，数据直接来自控制器：

$scope.sidebarElements=[{name:'Head 1', description:'Description 1', isActive:true}];

请考虑数据是通过JSON从服务器发送给我的。

如果我选择选项2，我可以直接将数据传递给控制器​​。

如果我选择选项1，我必须在其中执行<sidebar-element ng-repeat='element in elements' ...>，然后将数据传递给它。选项1看起来似乎“设计得更好”，但我不知道在不特别需要的时候我是否应该以这种方式构建另一层抽象。

两者中哪一个更好，为什么？

我刚刚开始使用AngularJS，并试图找到'在AngularJS中思考'的正确方法

Answer 1

这取决于您进行此设计所需的可扩展性。如果你想让这个设计在将来作为option1工作，那么只有你应该去做，因为它也会花费更多的时间来放置额外的代码。

如果你想采用高度可扩展的方法，你应该创建指令以及使用控制器数据创建集合的指令。 这个（Option1）允许用户使用这两个指令的组合来获取带有静态或动态数据的菜单。 如果您决定使用option1，此链接将非常有用[LINK]：http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/ [它有实例]：http://jsbin.com/acibiv/3/edit

如果您的数据总是来自json（控制器数据），并且永远不需要从html（静态）添加，那么您只需使用option2。

我认为，当你开始时，你应该选择2（更少可重复使用，但比较容易）。

关于指令命名 我认为侧边栏可能包含其他元素（菜单除外）。所以命名应该告诉它是菜单。