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



我正在尝试使用两个自定义指令构建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>

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

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

有什么想法吗?

这是一个修改后的 Plunkr,其中(仅(total的输入正在工作并绑定到 obj : http://plnkr.co/edit/OjEzjZeUC2yTKkaoFEoP

从表单中删除了这段代码.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();

然后我修复了脚本.js(您设置的键与索引中引用的键不同.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]".如您所见,在进行更改之前,您只需在子指令中使用实体并直接绑定到引用的属性/对象。实际上不需要复制任何值。

最新更新