在ngRepeat中使用指令时出现绑定问题

Question

在ngRepeat中使用指令时出现绑定问题

4

这就是它的外观，以及这里是Plunker链接。

parent scope 
   ng-repeat
       directive

在指令中，有一个属性与父作用域中的变量进行双向绑定。但是这并不像我想象的那样工作。（我可以理解为什么它不起作用）。原因是ngRepeat会创建自己的作用域，所以一旦在指令中更改了变量，Angular会向ngRepeat添加一个变量，但它不会更改父作用域中的变量。我可以像scope.$parent.$parent.variable这样做来更改变量，但这不太符合Angular的思想。我应该怎么做呢？此外，如果我更改items集合中的重复项，该项无法更改。这是由于上述相同的原因。

- maxisam

2

如果有用的话，尝试绑定到非原始类型（比如对象）。尽管会创建子作用域，但绑定应该仍然按预期工作，除非你要绑定到原始类型。请参阅此帖子以获取更多信息。 - Gloopy

不好意思，那不是我所问的。不过还是谢谢你。 - maxisam

一个 $emit 可能可以解决问题，但我不喜欢那个答案...感觉还有更好的解决方案：http://docs.angularjs.org/api/ng.$rootScope.Scope#$emit - Roy Truelove

1

冒泡事件，这个可以工作，但我觉得和你一样。 - maxisam

谢谢@Gloopy，你说得很到位。我应该更仔细地阅读那篇文章。 - maxisam

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Lesh · Accepted Answer

编辑（再次）：看起来问题是你需要在数组中有引用类型，比如对象或数组。

Gloopy 在评论中说得很对。双向绑定之所以不起作用，是因为似乎 Angular 在第二个作用域之间创建了原始类型（字符串、数字等）的副本。因此...当你在两个作用域之间嵌套具有双向绑定的原始类型时，它使用一个实例就可以了，但是当你将其嵌套超过一层时，它会创建原始类型的副本，你不再更新同一实例。

这里有一个新演示

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    { text: 'apples' },
    { text: 'bananas' },
    { text: 'oranges' }
  ];
  $scope.addItem = function(){
    $scope.items.push({ text: 'test' });
  };
});

app.directive('test', function(){
  return {
    restrict: 'E',
    scope: {
      foo: '=foo'
    },
    template: '<div>{{foo}} <a ng-click="bar()">bar</a></div>',
    controller: function($scope){ 
      $scope.bar = function() {
        $scope.foo += '!';
      };
    }    
  };
});