父数组中每个值的 Angular 指令保持同步

angular directive for each value in parent array keep in sync

本文关键字：指令 Angular 同步 数组      更新时间：2023-09-26

我有一个包含数组的父对象，对于每个值，我呈现一个指令，通过隔离范围传入该值。对于这个简单的演示，我只需将对象添加到控制器：

  $scope.schedule = {
    __type: "Fixed",
    ids: [101, 102, 103]
  }
})

和指令：

    app.directive('picker', function() {
  return {
      scope:{
        import: '='
      },
      template:'<input ng-model="import" >'
  }
});

该网页：

  <div ng-repeat="i in schedule.ids">
    <picker import="i"></picker>  Bind: {{i}}
  </div>
我

现实世界的问题是我有一个需要可重用的日期选择器指令，因此对于渲染的每个日期选择器，我希望底层/原始数组在值更改时保持同步。我做错了吗？

正如您在小提琴中看到的那样，我呈现的指令与其隔离范围值保持同步，但它们形成的底层数组却不同步，如下所示：

https://plnkr.co/edit/Nt9QwiBmlaW3PKPo8XRN?p=info

谢谢

由于数组的元素是原语，因此您需要引用实际数组

<div ng-repeat="i in schedule.ids track by $index">
    <picker import="schedule.ids[$index]"></picker>  Bind: {{i}}
</div>

演示

使用引用，而不是值，因为 angular 会尝试浅拷贝该对象

<div ng-repeat="(index, value) in schedule.ids track by $index">
    <picker import="schedule.ids[index]"></picker>  Bind: {{value}}
</div>

import="i"是 schedule.ids 的浅拷贝，import="schedule.ids[index]"是 schedule.ids 的引用，

工作演示 https://plnkr.co/edit/QX4Siu4xsJ6poQyy7Ljb?p=preview

相关文章：