AngularJS指令双向绑定失效：ng-repeat遍历对象属性无法编辑

这个问题的核心原因是：当你用ng-repeat="(key, option) in setup.configuration"遍历对象时，option只是原属性值的副本，不是对原对象属性的引用。所以你的指令里用option="="双向绑定的只是这个副本，修改它自然不会同步回$scope.setup.configuration里的原始属性。

修复方案 #

我们需要让指令直接绑定到原对象的属性上，而不是传递值的副本。具体可以这么改：

1. 修改自定义指令：
   把指令的scope从接收option改成接收整个配置对象，然后通过key来访问对应的属性：

   app.directive("kSetupOption", ['$rootScope',function ($rootScope) {
     return {
       scope:{
         key:"=",
         configuration:"=" // 接收整个配置对象
       },
       restrict: 'E',
       template:'<p>{{key}}: <input ng-model="configuration[key]" /></p>', // 直接绑定到对象的属性
       link: function (scope, element, attrs) {
       }
     }
   }]);
   

2. 修改HTML中的指令调用：
   不再传递option，而是传递整个setup.configuration对象：

   <k-setup-option 
     ng-repeat="(key , option) in setup.configuration" 
     configuration="setup.configuration" 
     key="key" 
   ></k-setup-option>
   

为什么这样能行？ #

现在指令里的ng-model="configuration[key]"直接指向了$scope.setup.configuration对象的对应属性，是引用类型的绑定，输入框的修改会直接同步到原对象上，双向绑定就正常工作了。

你也可以直接在指令里通过scope.$watch来监听变化，但上面的方法更简洁直接，符合AngularJS的数据绑定逻辑。

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