Question

我尝试使用两个自定义指令构建CRUD表单。第一个（crudForm）是主窗体指令，它包含应用于此窗体的所有控件（文本框，文本框，复选框等），第二个包含（一个或多个）内部是指令要包含在表单中的自定义控件。我想将一个对象绑定到main指令（crudForm），并将每个对象的字段绑定到crudForm内的一个子指令。例如，我在$scope中将对象定义为$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>

我有一个完整的例子here。

问题是我想自动绑定主控制器中的对象，首先绑定到表单，然后将每个字段绑定到控件，这样当输入发生更改时，对象绑定将更改为好。我无法做到这一点，因为据我在控制台日志中看到，控件的链接功能在表单链接功能之前执行，所以在控件的时候正在执行链接功能，绑定到表单链接功能的对象没有实现。

有什么想法吗？

Answer 1

以下是修改后的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; };

在指令control中更改了链接函数声明

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

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

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

顺便说一句：将$scope写为scope，将$attrs写为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]"。正如您所看到的，在您可以在您的子指令中使用实体并直接绑定到引用的属性/对象之前进行更改。没有实际需要复制任何值。

具有双向绑定的自定义分层AngularJS指令

1 个答案: