AngularJS复合组件 [英] AngularJS Composite Components

问题描述

我试图创建一个包含多个子组件的组件。我创建了我的团队的其他开发人员可以使用它来创建自定义搜索表单指令的集合。例如，他们会创造类似的标记：

I'm trying to create a component that contains multiple child components. I'm creating a collection of directives that other developers on my team can use to create custom search forms. For example, they would create markup like:

<search-panel name="myCustomSearch">
    <search-field name="dates" type="dateRange"></search-field>
    <search-field name="categories" type="categorySelector" data="{{categories}}"></search-field>
</search-panel>

我有一个搜索面板指令和一些搜索领域的指令。搜索面板充当容器和搜索字段均提供了一个特定类型的字段（日期范围，提前键入，类别选择器，等）。每个搜索字段中有一个值属性的范围，我试图找出一个办法让父搜索面板指令有一个属性它是一个包含键，所有子搜索字段的值征收范围。

I have a search panel directive and several search field directives. The search panel acts as a container and the search fields each provides a specific type of field (date range, type ahead, category selector, etc). Each search field has a value property in it's scope and I am trying to figure out a way to have the parent search panel directive have a property in it's scope that contains a key, value collection of all of the child search fields.

我有两个指令渲染正确的，但我不知道如何可以使搜索面板意识到/访问所有的子组件。

I've got both directives rendering correctly, but I'm not sure how to either make the search-panel aware of/have access to all the child components.

推荐答案

您可以在要求搜索字段指令中搜索面板控制器使用要求：^ searchPanel

You can require in search-field directive a search-panel controller using require:'^searchPanel'

然后在链接功能，您将有一个链接到该控制器，因此这些指令可以将自己添加到某些阵列（我assuemm每个搜索领域都有其隔离范围内）：

Then in link function you'll have a link to that controller, so those directives could add themselves into some array (I assuemm each search field has its isolated scope):

link: function(scope, elem, attrs, spCtrl) {
  spCtrl.fields.push({name: attrs.name, scope: scope});
}

（ofcourse，您可以添加不整的范围，但一些对象，然后查看该对象的变化和更新值字段。

(ofcourse, you could add not whole scope, but some object, then watch for changes and update value field of that object.

这篇关于AngularJS复合组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！