【问题标题】:Passing scope variables between nested directives在嵌套指令之间传递范围变量
【发布时间】:2016-06-18 10:49:09
【问题描述】:

我有一些嵌套指令如下:

    <div ng-controller="MyCtrl">
       <parent sku="12345">
          <child>
          </child>
       </parent>
    </div>

父指令和子指令都有一个独立的作用域,但我需要在父子指令之间共享 SKU 属性值,以便子指令可以访问该值。该值将始终在 HTML 中进行硬编码。

理想情况下,我希望每个指令都有自己的单独控制器以及位于两者顶部的父控制器(MyCtrl),我打算为每个指令提供自己的隔离范围,然后选择和选择我想在它们之间共享的范围值。问题是我不知道该怎么做。

Plunkr 可以在这里找到...

https://plnkr.co/edit/2M4OMNdXHlzq2MG9ugo0?p=preview

【问题讨论】:

  • 您想要拥有您发布的 HTML 结构吗?然后,您将需要处理 transcusion 并在父模板内的某个位置渲染子节点。
  • 我目前有这样的 HTML,并且为子指令和父指令有单独的模板文件
  • 这并没有回答我关于共享范围值的问题
  • 它实际上回答了:)。但我可以重复一遍:使用这种结构,您需要手动嵌入父内容,然后您可以控制范围。
  • 我喜欢 Aleksey 的建议,看看吧。通过嵌入,它可能看起来像这样:plnkr.co/edit/KlE4Ssl33arojhjeZRI9?p=preview

标签: angularjs angularjs-directive scope


【解决方案1】:

您可以将getSku 方法添加到父控制器,然后在子控制器的link 函数中获取此值。这是demo
如果您使用 angular 1.5.* 也可以检查 components 语法。如果没有link 函数,您将能够获得类似的结果。

【讨论】:

  • 我喜欢这个答案,因为它允许您保持范围隔离并更好地控制传入的内容。我认为这也是角度文档所建议的内容。对于要求,使用嵌入选项似乎有点复杂
  • Aleksey 能给我一个与组件语法相同的例子吗?
  • 当然,这里是example 和组件
  • 谢谢阿列克西。完美的例子!
  • 稍微扩展一下...假设在父控制器中,您使用服务来根据属性中使用的 sku 检索产品数据。有什么方法可以使用回调,当这完成后,子指令检索此数据
猜你喜欢
  • 1970-01-01
  • 2013-04-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-06
相关资源
最近更新 更多