如何让嵌套的 ng-repeat 表单输入停止相互更新？

Question

我的输入字段正在相互更新！

这里显然有一些传递引用的恶作剧，但我想不通。

我有一个使用 ng-repeat 设置的自定义指令：

<my-dir ng-repeat="obj in mio" obj="obj" other="otro" unique-name="_{{$index}}"></my-dir>

此指令包含一个表单，其输入是 also ng-repeating 指令。（表单的每个实例都需要相同的输入集。）

我做过的事情：

给定每个 my-dir 表单及其中的每个输入元素一个唯一的 id
尝试在嵌套的 ng-repeat（即 track by uniqueName + input.varname）中使用 a composite track by，但似乎无法从父作用域传入变量
将嵌套的 ng-repeat 包裹在 ng-if 中以查看是否创建了一个方便的隔离范围

我的输入字段仍在相互更新。

附加代码

在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>

并在 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}}"
>

（很高兴还包括指令 js 中的代码，但这个问题已经很长了。）

Answer 1

原来这个问题与缺少唯一 ID 的指令无关。

问题是 parameter-directive 的 ng-model 绑定到来自父指令的同一个对象（在上面的示例中，对象通过 other="otro" 传入）并且通过引用传递。

otro 对象也恰好是从 API 加载的，所以我最后添加了一个 broadcast 事件：

在 my-dir.directive.js 中：

$scope.getOtro = function getOtro() {
  $http.get(URL)
    .then((resp) => {
      $scope.otro = resp.data;
      $scope.$broadcast('otro-loaded', $scope.otro.inputs);
      }
  };

在 parameter-directive.directive.js 中：

$scope.$on('otro-loaded', (_, inputs) => {
    $scope.inputs = angular.copy(inputs);
});

我不会说这是解决此问题的特别优雅方法，但它确实起到了作用。

如何让嵌套的 ng-repeat 表单输入停止相互更新？

How can I get my nested ng-repeat form inputs to stop updating each other?

javascript

angularjs

angularjs-directive

angularjs-ng-repeat

我的输入字段正在相互更新！

附加代码