如何使用FormController与指令

时间:2014-11-26 11:52:11

标签: angularjs angularjs-directive

我正在尝试构建与表单配合良好的小部件指令

完整示例位于http://jsfiddle.net/jy81bchd/4/

主要思想是:

编写自己的表单,将小部件放入其中

<form name="otherForm" novalidate ng-init="model = {name: 'test'}" novalidate> <swif-widget-text name="name" required="required" input-model="model.name"> <span translate>Name</span> </swif-widget-text> </form>

widget指令将所有属性复制到输入中,并在标签中转换contennt。

我的不同问题是:

1)我无法更新主窗体的formController,它没有找到不同的输入throw指令。最好的应该是使用formcontrolller.addControl,但我不能成功使用它

2)为了解决1,我尝试将每个小部件设置为不同的形式。这是工作execpt formcontroller在调用链接后不会更新(归因于复制到输入并不会影响控制器)。

在小提琴中,我将所需的属性复制到输入中,但是如果你清空该字段,它仍然有效,根据表格控制器。

我添加了姓名=&#34;输入&#34;另外因为如果我将name属性复制到输入,表单控制器也找不到任何输入。

结论: 据我所知,在调用链接之前初始化并加载了formcontroller。 我怎么能改变它?

1 个答案:

答案 0 :(得分:1)

有几篇关于如何创建自己的表单组件的帖子,它与表单和附加到它的控制器很好地配合。

例如:http://blog.revolunet.com/blog/2013/11/28/create-resusable-angularjs-input-component/

检查你的小提琴我有一些你需要注意的事情:

1)向表单元素添加名称和控制器,以便处理其中的所有表单元素。通过在该控制器中注入的$ scope,您可以处理表单元素(还可以为表单元素添加有意义的名称)。

2)和你的自定义组件:   - 应该使用ng-model而不是input-model。   - 应该要求&#39; ngModel&#39;在指令定义中   - 在链接阶段,您将获得对ngModelController的引用,并检查上面的链接以了解您应该如何与其进行交互以实现类似行为的双向绑定。 (使用$ viewValue,$ render和$ setViewValue)