[英]How can I get my nested ng-repeat form inputs to stop updating each other?
There's clearly some pass-by-reference shenanigans here, but I can't figure it out. 这里显然有一些传递参考的诡计,但我无法弄清楚。
I have a custom directive that I'm setting up with ng-repeat: 我有一个自定义指令,我正在设置ng-repeat:
<my-dir ng-repeat="obj in mio" obj="obj" other="otro" unique-name="_{{$index}}"></my-dir>
This directive contains a form whose inputs are also ng-repeating directives. 该指令包含一个表单,其输入也是 ng-repeating指令。 (Each instance of the form needs the same set of inputs.) (表单的每个实例都需要相同的输入集。)
Things I have done: 我做的事情:
my-dir
form and each input element within it a unique id
给定每个my-dir
表单,其中的每个输入元素都是唯一的id
track by
in the nested ng-repeat
(ie track by uniqueName + input.varname
), but couldn't seem to pass in variables from the parent scope 尝试在嵌套的ng-repeat
使用复合track by
(即track by uniqueName + input.varname
),但似乎无法从父作用域传入变量 ng-repeat
in an ng-if
to see if that created a convenient isolate scope 在ng-if
包装嵌套的ng-repeat
以查看是否创建了方便的隔离范围 My input fields are still updating each other. 我的输入字段仍在相互更新。
in my-dir.html
: 在my-dir.html
:
<form name="{{uniqueName}}">
<parameter-directive
ng-repeat="input in otro.inputs"
type="input.vartype"
name="input.varname"
id-key="{{uniqueName}}"
ng-model="input">
</parameter-directive>
</form>
and in parameter-directive.html
: 并在parameter-directive.html
:
<label for="{{name}}" class="pull-left">{{name}}</label>
<input
ng-required="{{defaultValue == null}}"
id="{{idKey + '_' + name}}"
ng-model="ngModel.val"
ng-attr-type="{{inputType}}"
>
(Happy to also include code from the directive js
, but this question is already quite long.) (很高兴也包含来自指令js
代码,但这个问题已经很长了。)
Turns out the issue had nothing to do with the directives lacking unique ids. 事实证明这个问题与缺乏唯一ID的指令无关。
The issue was that the parameter-directive
's ng-model
was bound to the same object from the parent directive (in the example above, the object passed in with other="otro"
) and passed by reference. 问题是parameter-directive
的ng-model
被绑定到父指令中的同一个对象(在上面的例子中,对象传入了other="otro"
)并通过引用传递。
The otro
object also happens to be loaded from an API, so I ended up adding a broadcast
event: otro
对象也恰好从API加载,所以我最终添加了一个broadcast
事件:
in my-dir.directive.js
: 在my-dir.directive.js
:
$scope.getOtro = function getOtro() {
$http.get(URL)
.then((resp) => {
$scope.otro = resp.data;
$scope.$broadcast('otro-loaded', $scope.otro.inputs);
}
};
in parameter-directive.directive.js
: 在parameter-directive.directive.js
:
$scope.$on('otro-loaded', (_, inputs) => {
$scope.inputs = angular.copy(inputs);
});
I will not claim that this is a particularly elegant way to solve this problem, but it did the trick. 我不会声称这是解决这个问题的一种特别优雅的方法,但它确实可以解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.