指令的範圍內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

回答

相關問題