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>

我有一个搜索面板指令和几个搜索字段指令.搜索面板充当容器，每个搜索字段都提供特定类型的字段(日期范围、提前类型、类别选择器等).每个搜索字段在其范围内都有一个 value 属性，我试图找出一种方法，让父搜索面板指令在其范围内有一个属性，该属性包含所有子搜索字段的键值集合.

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.

推荐答案

您可以使用 require 在 search-field 指令中要求一个 search-panel 控制器:'^searchPanel'

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

然后在链接函数中，您将有一个指向该控制器的链接，因此这些指令可以将自己添加到某个数组中(我假设每个搜索字段都有其独立的范围):

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, you could add not whole scope, but some object, then watch for changes and update value field of that object.

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