angularjs - "angular way"用于动态添加指令

Question

Josh 的 answer 给我留下了深刻的印象关于客户端的“Angular 方式”和声明式风格。

但是你能帮我理解一下，怎么做吗:

我有一个单页应用程序，左侧是菜单栏，右侧是 div 容器。

当用户单击左侧菜单栏中的菜单项时，在右侧我必须打开带有一些网格的新选项卡，如下所示:

在 Angular 我意识到了 <grid>指令。

当用户单击菜单项时，我必须在右侧动态添加带有参数的网格指令。

执行此功能的 Angular 方式是什么？

更新:我找到了 article关于动态选项卡，这是 example我如何在我的案例中使用它

Answer 1

既然你问了一个笼统的问题，那我就给你个笼统的答案吧。应该会有帮助:)

AngularJS是模型/数据驱动的，如果你想对UI做任何改变，你首先想到的可能是如何通过改变数据来实现.有了这个想法，我们可以这样实现:

1. 定义一个 ng-repeater，它应该为名为 MyTabs 的 Tab 对象列表呈现选项卡，例如。

2. 当您想添加一个新选项卡时，创建一个选项卡对象并将其添加/推送到 MyTabs。

3. 得益于双向数据绑定(bind)，AngularJS 会神奇地将其呈现在 UI 上。