如何在ng-repeat生成的嵌套模板中访问ng-model值？

你遇到的是AngularJS隔离作用域导致的绑定失效问题，我来帮你一步步解决：

核心问题拆解 #

父模板里ng-repeat循环出的test变量，没办法直接在子模板里访问，本质原因是：AngularJS组件默认使用隔离作用域，父作用域的变量不会自动渗透到子组件中，你需要显式建立数据绑定通道。

具体解决方案 #

1. 给子组件配置双向绑定

首先在<inner-thing>组件的JS定义里，通过bindings接收父组件传递的ng-model，建立双向绑定关系：

angular.module('你的应用模块名').component('innerThing', {
  templateUrl: 'inner-template.html',
  bindings: {
    ngModel: '=' // 用`=`表示双向绑定父组件的变量
  }
});

2. 修改子模板的绑定路径

子模板里不能直接写test.id，要通过组件的控制器作用域（$ctrl）访问绑定进来的ngModel：

<!-- 修改后的inner-template.html -->
<div>
  <md-input-container>
    <label>ID</label>
    <input type="text" ng-model="$ctrl.ngModel.id">
  </md-input-container>
</div>

3. 确保父组件的test是对象类型

额外注意：$ctrl.test_list里的每一项必须是对象（比如{ id: '' }），不能是字符串、数字这类原始类型。因为原始类型是值传递，双向绑定会失效；对象是引用传递，子组件修改属性会同步到父组件的test中。

父模板无需修改 #

你的父模板写法是正确的，保持原样即可：

<!-- outer-template.html 保持不变 -->
<div ng-repeat="test in $ctrl.test_list">
  <div id="test-{{ $index }}" layout="row">
    <inner-thing ng-model="test"></inner-thing>
  </div>
</div>

这样调整后，子组件就能正常访问并修改ng-repeat生成的test对象属性，父组件的数据也会同步更新啦。

内容的提问来源于stack exchange，提问作者J_Stan