在Angular中使用嵌套指令共享隔离范围

时间:2013-12-03 22:21:09

标签: angularjs angularjs-directive angularjs-scope

我希望有一个可重用的自定义指令,并创建一个隔离范围,以便可以在任何地方使用(只要使用者使用指令定义的API)。然后,我希望消费者能够轻松地混合和匹配适合主要可重用指令的不同可重用片段。

我正在使用的情况是下拉菜单。主要指令将隔离范围并为整个下拉列表定义API。内部指令允许消费者选择是否需要打开菜单的按钮,打开菜单的搜索框/输入字段等。然后他们还可以选择使用的菜单样式:

<dropdown items="..." selected-item="...">
  <dropdown-button>(Transcluded button text here)</dropdown-button>
  <dropdown-icon-list></dropdown-icon-list>
</dropdown>

父指令/控制器将处理内部块的状态/通信(即,按钮可能触发“打开”状态,列表将通过打开响应)。换句话说,父指令将为消费者提供一个单独的位置来定义行为并将范围与页面的其余部分隔离,而嵌套指令将根据其角色更改共享状态/响应共享状态的更改。

我实际上通过在主“dropdown”指令上使用隔离范围然后使用嵌套指令继承范围(未在嵌套指令上指定“scope:...”)来实现此功能。但是,对于Angular 1.2,事情发生了变化,父母的孤立范围确实是孤立的 - 孩子们继承了父指令之外的范围,而不是共享其孤立的范围。

完成这样的事情的角度方法是什么?

我已经开始改造我现有的代码,以便与嵌套子项共享父指令中的控制器,但是当我遇到孩子需要监听共享上的更改的情况时,我觉得这是错误的方法。范围...我能看到的唯一方法是将嵌套指令中的回调函数传递给共享控制器,它将绑定到$ scope。$ on方法。似乎是错误的道路。

1 个答案:

答案 0 :(得分:0)

AngularJS提供了3种类型的前缀。

  1. “@”(文本绑定/单向绑定)
  2. “=”(直接模型绑定/双向绑定)
  3. “&安培;” (行为绑定/方法绑定)
  4. 所有这些前缀都从指令元素的属性接收数据,并提供指令之间的通信。请访问以下链接以获取类似问题。

    访问https://stackoverflow.com/a/33024209/4348824