javascript - 使用angularjs组合多层视觉元素

Question

我希望使用 angularjs 构建自定义小部件。我的问题是我希望能够松散地耦合我的小部件。

就我而言，我希望构建一个两级组件:

• 图形微调器
• 一个将微调器作为参数的进度小部件。

我已经构建了微调器 - http://jsfiddle.net/Byg6W/

我想这样写进度小部件:

<gh:progress data="progress">
   <gh:spinner .... options ....> </gh:spinner>
</gh:progress>

并且能够以某种方式将两个组件“连接”在一起，这样当“数据”更新时，它会自动输入到 gh:spinner，这与我不愿意做的相反——将所有选项放入 gh:spinner进入 gh:progress

<gh:progress data="progress" .... options ....></gh:progress>

然后使用模板。

提前致谢!

Answer 1

你可以在你的 gh:progress 指令上创建一个 Controller ，它被 gh:spinner 调用。你的 gh:spinner 可以通过 require: 属性将这个 Controller 注入(inject)到它的 link: 函数中。在这里，您将在 require 中使用 ^ 来告诉它在父元素上查找 Controller 。

请参阅 http://docs.angularjs.org/guide/directive 上的要求:规范.

查看 angularjs.org 主页底部的 Tabs 示例以查看它的实际效果。在这里， Pane 指令需要父选项卡的 Controller ，以便它们可以注册并让选项卡控制它们之间的切换。