angularjs - ngRepeat 中的指令时的绑定(bind)问题

标签 angularjs

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

parent scope 
   ng-repeat
       directive

在指令中有一个属性是与父范围内的变量双向绑定(bind)。

但这并没有按我的意愿工作。(但我可以理解为什么它不起作用)

原因是 ngRepeat 会创建它自己的范围,因此一旦指令中的变量发生更改,Angular 就会在 ngRepeat 中添加一个变量,但它会保持父级中的变量不变。

我可以做一些类似 scope.$parent.$parent.variable 的事情来改变变量,但这有点不是 Angular 的想法。

我应该怎么做 ?

此外,如果我更改项目集合中的重复项目,则无法更改项目。

因为同上的原因。

最佳答案

编辑(再次):看起来问题是您需要在数组中有引用类型,例如对象或数组。

Gloopy 在评论中完全正确。双向绑定(bind)不起作用,因为 Angular 似乎在第二个作用域配对之间创建了原始类型(字符串、数字等)的副本。所以......当您在两个范围之间嵌套双向绑定(bind)的原始类型时,这很好,因为它使用一个实例,但是当您将其嵌套超过一个深度时,它会创建原始类型的副本并且您不再更新同一个实例。

Here's a new demo

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 += '!';
      };
    }    
  };
});

关于angularjs - ngRepeat 中的指令时的绑定(bind)问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13148609/

相关文章:

javascript - url 哈希更改成功 - 在 Angular 指令中

javascript - angularjs 如何使方法在 Controller 中调用自身

php - php 中的 Angular.js 模式窗口回显不起作用

javascript - angularjs - 使用 JS 对象设置选择元素选项值

javascript - Karma AngularJS Bootstrap 和窗口变量

javascript - 获取 Angular ng-option 中的选定值

angularjs - Ionic - 当凭据标志为真时,不能在 '*' header 中使用通配符 'Access-Control-Allow-Origin'

javascript - AngularJS - 覆盖指令的编译函数不调用链接函数?

AngularJS。 ui-view 包含在 ng-view 中

javascript - 提示数字或字符仅在文本框中输入值?在 AngularJS 中如何?