指令的范围内ng重复angularjs

我想了解ng-repeat内的指令的范围，仍然想知道它是否来自ng-repeat，但它看起来像。这里是我的代码指令的范围内ng重复angularjs

directive.js

myApp.directive('dirSample', function() { 
    return { 
    template: '<input type="text" ng-model="name" />', 
    replace: true, 
    restrict: 'AE' 
    } 
});

mainController.js

angular.controller('mainController',function($scope){ 
    $scope.name = 'name' 
});

的index.htm

<div ng-repeat="i in [1, 2, 3, 4]"> 
    <dir-sample></dir-sample> 
</div> 

<dir-sample></dir-sample> 
<dir-sample></dir-sample>

当我在最后两个指令中的一个（它不在ng-repeat内部）中进行更改时，它运行良好，其中一个更改反映在另一个上。

问题：

1 - 如果我改变由NG-重复产生的指令的输入值，更改不会反映任何其他地方。 2 - 如果我改变最后两个指令之一的输入值，ng-repeat内的指令也会改变，但是如果触摸（改变输入值）任何指令，改变将不会反映在该指令上，但将保持存在体现在其他指令上。

有人可以解释为什么范围有这种行为？

谢谢。

来源

2015-12-05 badr slaoui

ngRepeat创建每次迭代的新范围。 – dfsq

那么为什么在最后两条指令上的更改反映在ngRepeat内部，直到我触摸它们？ –

你需要阅读（很多，但是如果你想更好地理解JS，这很重要）关于原型继承如何工作。 Angular中的范围继承基于良好的旧JS原型。正如我所说ngRepeat创建新的范围。这意味着基本属性会影响外部范围属性。 – dfsq

绑定原语很棘手，正如这里所解释的：Understanding scopes。它必须与Javascript的工作方式。一旦在ng-repeat块内改变了你的'name'变量就会被遮蔽。建议的修复（从上面的链接）：

这与原语问题可以通过以下的总是 “最佳做法”很容易地避免有一个“”在NG-模型

他们还提供了一个链接到一个视频解释正是这个问题：AngularJS MTV Meetup

所以修复看起来是这样的：

app.controller('mainController',function($scope){ 
    $scope.attr= {} 
    $scope.attr.name = 'name' 
}); 

app.directive('dirSample', function() { 
    return { 
    template: '<input type="text" ng-model="attr.name" />', 
    replace: true, 
    restrict: 'AE' 
    } 
});

来源

2015-12-05 09:10:01 wvdz

谢谢。看起来我只有很少的概念...... 编辑：你提供的链接很好地解释了这个概念。再次感谢。 –

另一个解决方法是使用Object.define属性为名称定义getter和setter。这也防止了阴影，并保持代码更具可读性（我的意见）。 – AlexS

指令的范围内ng重复angularjs

回答

相关问题