我正在尝试使用两个自定义指令构建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]"
.如您所见,在进行更改之前,您只需在子指令中使用实体并直接绑定到引用的属性/对象。实际上不需要复制任何值。