gpt4 book ai didi

javascript - ngRepeat 继续重新创建

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:29:40 27 4
gpt4 key购买 nike

我创建了一个 fiddle模拟我的问题。我正在使用 ng-repeat 创建一些节点。但是这些节点将被另一个库 (Openlayers) 使用,该库将这些节点“移动”(appendChild) 到 DOM 中的另一个位置。

因此,一场争夺这些节点的战斗正在上演。有没有办法告诉 ngRepeat 停止重新排序、重新创建(不确定最好的术语)?

http://jsfiddle.net/jonataswalker/dbxmbxu9/

标记

<button ng-click="create()">New Record</button>
<div data-label="Created here">
<div
id="hint-{{$index}}"
class="hint--always hint--right"
data-hint="{{row.desc}}"
ng-repeat="row in rows track by row.id"
on-render>{{row.desc}}
</div>
</div>
<div id="wrap" data-label="I'd like all to be here"></div>

JS

app.controller('ctrl', ['$scope', function($scope) {
$scope.rows = [];
$scope.count = 0;
var wrap = document.getElementById('wrap');

$scope.create = function(){
var c = $scope.count++;
$scope.rows.push({
id: c,
desc: 'dummy-desc-' + c
});
};

$scope.move = function(div){
wrap.appendChild(div);
};
}]);
app.directive('onRender', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function(){
scope.move(element[0]);
});
}
}
};
}]);

最佳答案

最后,我不得不放弃使用ng-repeat。感谢所有评论。

我找到的解决方案是使用 $compile服务并让 DOM 操作自由。

http://jsfiddle.net/jonataswalker/y4j679jp/

app.controller('ctrl', ['$scope', function($scope) {
$scope.rows = [];
$scope.count = 0;
var wrap = document.getElementById('wrap');

$scope.move = function(div){
wrap.appendChild(div);
};
}]);
app.directive('button', ['$compile', function($compile){
return {
restrict: 'A',
link: function(scope){
var div = document.getElementById('c1');

scope.create = function(){
var c = scope.count++;
var row = { id: 'hint-' + c, desc: 'any desc #' + c };
var index = scope.rows.push(row) - 1;

var html = [
'<div id="'+row.id+'"',
'class="hint--always hint--right"',
'data-hint="{{rows['+index+'].desc}}"',
'data-index="'+index+'"',
'on-render>{{rows['+index+'].desc}}</div>'
].join(' ');

angular.element(div).append($compile(html)(scope));
};
}
};
}]);
app.directive('onRender', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
$timeout(function(){
scope.move(element[0]);
}, 2000).then(function(){
$timeout(function(){
scope.rows[attr.index].desc = 'changed .... ' + attr.index;
}, 2000);
});
}
};
}]);

关于javascript - ngRepeat 继续重新创建,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34039908/

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