0

我正在尝试使用两个自定义指令构建一个 CRUD 表单。第一个 ( crudForm) 是主表单指令，包含应用于此表单的所有控件（文本框、文本区域、复选框等），第二个包含（一个或多个）内部是包含自定义控件的指令在表格中。我想将单个对象绑定到主指令 ( crudForm)，并将对象的每个字段绑定到其中的一个子指令crudForm。例如，我在$scopeas中定义了一个对象$scope.obj = { "order_id":20, "total": 44.50, "info": "..." }，并有一个表单来编辑它

<crud-form key-field="order_id" entity="obj">
  <control type="money" field-name="total" field-title="Total"></control>
  <control type="textarea" field-name="info" field-title="Information"></control>
</crud-form>

我在这里有一个完整的例子。

问题是我想在主控制器中自动绑定对象，首先绑定到表单，然后将每个字段绑定到控件，这样当输入发生变化时，绑定的对象也会发生变化。我不能这样做，因为据我在控制台日志中看到，控件的链接函数在表单的链接函数之前执行，所以在执行控件的链接函数时，对象绑定到了表单的链接函数没有实例化。

有任何想法吗？

4

1 回答 1

0

这是一个修改后的 Plunkr，其中（仅）输入total有效并绑定到obj：http ://plnkr.co/edit/OjEzjZeUC2yTKkaoFEoP

从 form.js 中删除了这段代码（它无论如何都会抛出错误，因为你不能访问这样的实体）：

element.find('[rel=input]').on('change', function() {
  $scope.$parent.entity[$scope.field.name] = $(this).val();
}).val($scope.$parent.entity[$scope.field.name]);

将此添加到控制器代码中crudForm：

this.getEntity = function() { return $scope.entity; };

In 指令control将链接函数声明从

post: function($scope, element, $attrs) {

对此，从而添加对父控制器的引用。

post: function($scope, element, $attrs, parentCtrl) {

顺便说一句：写$scopeasscope和$attrsas attrs。这些参数是固定位置的，而不是按名称神奇地工作。所以避免混淆。

然后我将此代码添加到链接函数中control：

$scope.entity = parentCtrl.getEntity();

然后我修复了 script.js（您设置的键与您在 index.html 中引用的键不同！）并作为示例将代码从 money.tpl.html 更改为：

<div class="input-prepend">
    <span class="add-on">{{ field.options.symbol }}</span>
    <input type="text" id="field-{{ field.name }}" class="input-small" rel="input" ng-model="entity[field.name]"/>
</div>

这里的变化是ng-model="entity[field.name]"。如您所见，通过更改之前您可以在子指令中使用实体并直接绑定到引用的属性/对象。不需要复制任何值。

于 2013-10-01T03:26:31.780 回答