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

Question

我正在使用 angularJS 创建一个简单的侧面菜单。我对其指令设计有以下两种选择，但无法决定哪一种更好:

选项 1

HTML 标记:

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

选项 2

HTML 标记:

<sidebar>Sidebar Heading</sidebar>

而且，数据直接来自 Controller :

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

假设数据以 JSON 格式从服务器发送给我。

如果我选择选项 2，我可以将数据直接传递到 Controller 。

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

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

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

Answer 1

这取决于您需要如何进行此设计的可扩展性。如果你想让这个设计在未来作为选项1工作，那么只有你应该这样做，因为它也会消耗更多的时间来放置额外的代码。

如果您想采用高​​度可扩展的方法，您应该创建指令以及将使用 Controller 数据创建集合的指令。 此(选项1)将允许用户使用这两个指令的组合来获取具有静态或动态数据的菜单。 如果您决定使用选项 1，此链接将会很有用 [LINK]:http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/ [它有实例]:http://jsbin.com/acibiv/3/edit

如果您的数据始终来自 json( Controller 数据)并且永远不需要从 html(静态)添加，那么您只需使用选项2。

我认为当你开始时，你应该选择选项2(可重用性较低，但相比之下更容易)。

关于指令命名 我认为侧边栏可能包含其他元素(菜单除外)。所以命名应该表明它是菜单。