gpt4 book ai didi

javascript - ng-repeat 中的 Angularjs 指令不更新外部 Controller 数据

转载 作者:行者123 更新时间:2023-11-29 21:16:32 26 4
gpt4 key购买 nike

我在 ng-repeat 中使用了一个 isolate scope 指令,它从该模板的 Controller 迭代一个数组。模板如下:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="script1.js"></script>
</head>

<body ng-app="AddNewTest" ng-controller="AddNewController">
<div class="items" ng-repeat="row in rows">
<add-new-row data="row" index="$index"></add-new-row>
</div>
</body>

</html>

指令定义如下:

angular.module('AddNewTest', []).
directive('addNewRow', function ($timeout) {
return {
controller: 'AddNewController',
link: function (scope, element, attribute) {
element.on('keyup', function(event){
if(scope.index + 1 == scope.rows.length) {
console.log('keyup happening');
$timeout(function () {
scope.rows.push({ value: '' });
scope.$apply();
});
}
})
},
restrict: 'E',
replace: true,
scope: {
index: '='
},
template: '<div class="add-new"><input type="text" placeholder="{{index}}" ng-model="value" /></div>'
}
}).
controller('AddNewController', function ($scope, $timeout) {
$scope.rows = [
{ value: '' }
];
});

但即使在添加新行并执行 $apply() 之后,ng-repeat 也不会呈现添加的新数据。请帮忙。

Plnkr Link Here

最佳答案

将行数组传递给指令如下:-

 scope: {
index: '=',
rows :'='
},

<add-new-row rows="rows" index="$index"></add-new-row>

Working plunker

关于javascript - ng-repeat 中的 Angularjs 指令不更新外部 Controller 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39206278/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com