![](/img/trans.png)
[英]AngularJS: two way data binding not working in nested ng-repeat
[英]AngularJS : Two way data binding - directive with ng-repeat - not working
我堅持從指令到控制器的雙向數據綁定。 指令是ng-repeat。 嘗試了幾件事,但無法獲得指令范圍變量反映在控制器中。
angular.module("myApp", [])
.controller("Ctrl1", function ($scope) {
$scope.crossTabs = [1,2,3,4,5];
})
.directive("crossTab", function () {
return {
restrict: "E",
template: "<input type='text' ng-model='crossTab'/><button ng-click='changeLols()' id='clc'>change crossTabs</button>",
scope: {
crossTabs: '=',
crossTab: '='
},
controller: function($scope){
$scope.changeLols = function(){
// The below comment line is not working. It doesnt change anything. But the one uncommented which pushes an element updates the controllers 'crossTabs' variable as well.
//$scope.crossTabs = [3,4,5];
$scope.crossTabs.push(6);
}
},
link: function (scope, elem, attrs) {
}
}
});
HTML
<div ng-app="myApp" ng-controller="Ctrl1">
<div> Controller: {{ crossTabs }}</div><br>
<h5>Directive Section below</h5>
<cross-tab ng-repeat="crossTab in crossTabs" cross-tab="crossTab" cross-tabs="crossTabs"></cross-tab>
</div>
這里是jsfiddle: http : //jsfiddle.net/keshav89/sezknp1t/1/
我錯過了什么 我嘗試使用鏈接功能,但無濟於事。
把它們放在這樣的對象中:
$scope.viewModel = {
crossTabs: [1, 2, 3, 4, 5]
};
和:
<cross-tab ng-repeat="crossTab in viewModel.crossTabs" cross-tab="crossTab" cross-tabs="viewModel.crossTabs">
演示: http : //jsfiddle.net/fzz9xabp/
關於原型繼承和AngularJS的一個很好的答案可以在這里找到。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.