结合问题,当在ngRepeat指令指令、问题、ngRepeat

由网友(Irony(讽刺))分享简介:所以这是它的样子,这里是 Plunker so this is how it looks like, and here is the Plunkerparent scope ng-repeatdirective在指令中有一个属性是双向的结合与亲本范围的可变in the directive there is an...

所以这是它的样子,这里是 Plunker

so this is how it looks like, and here is the Plunker

parent scope 
   ng-repeat
       directive

在指令中有一个属性是双向的结合与亲本范围的可变

in the directive there is an attribute is bi-directional binding with a variable in parent scope.

但我想这是行不通的。(但是我可以理解为什么它不工作)

But this doesn't work as I wanted.(But I can understand why it doesn't work)

原因是ngRepeat将创建它自己的范围内,所以一旦变量在指令改变,角在ngRepeat添加变量,但它留在父母不变的变量。

The reason is ngRepeat will create it's own scope, so once the variable is changed in directive, Angular add a variable in ngRepeat, but it leave the variable in parent unchanged.

我可以做这样的事情的范围。$父。$​​ parent.variable改变变量,但它是有点儿不角的想法。

I can do something like scope.$parent.$parent.variable to change the variable, but it is kinda not the idea in Angular.

我应该怎么办?

此外,如果我在项集合改变重复项目,该项目不能更改。

Moreover, if I change the repeated item in the items collection, the item can't be changed.

由于上述同样的原因。

推荐答案

编辑(再次):它看起来像问题是你需要有引用类型的数组中,如对象或数组

EDIT (again): It looks like the issue is you need to have reference types in your array, such as objects or arrays.

Gloopy是在评论分毫不差。双向绑定是行不通的,因为它看起来像角是创造第二范围配对之间的原语类型(字符串,数字等)的复印件。所以...当你有两个范围双向绑定原始类型的嵌套它的罚款,因为它使用了一个实例,但是当你窝在多台深,它会创建原始的副本,你不再更新相同的实例。

Gloopy was exactly right in the comments. The bi-directional binding wasn't working because it seems like Angular was creating copies of your primitives types (strings, numbers, etc) between the second scope pairing. So... when you have a nesting of bi-directionally bound primitive types between two scopes it's fine because it uses one instance, but when you nest it more than one deep, it creates a copy of the primitive and you're no longer updating the same instance.

这里有一个新的演示

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 += '!';
      };
    }    
  };
});
阅读全文

相关推荐

最新文章