使用 ng-repeat 时，删除列表项时不会删除嵌入的元素 - IT屋-程序员软件开发技术分享社区
首页 其他开发 使用 ng-repeat 时，删除列表项时不会删除嵌入的元素
使用 ng-repeat 时，删除列表项时不会删除嵌入的元素
[英] Transcluded element not being deleted on removal of list item when using ng-repeat
本文介绍了使用 ng-repeat 时，删除列表项时不会删除嵌入的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个使用 ng-repeat 实例化的小部件.初始创建工作正常，但之后它停止更新.以下是 index.html 的摘录:
<x-node ng-repeat="节点中的节点"></x-node>
partials/node.html:
{{node.name}}
还有指令:
angular.module('directive', []).directive('node', function() {返回 {限制:'E'，范围:真实，templateUrl: 'partials/node.html',替换:真的，编译:函数(tElement，tAttrs，transclude){返回 {帖子:功能(范围，iElement，iAttrs){scope.$on('$destroy', function(event) {console.log('销毁');});}};}};});如果我像这样修改控制台中的节点列表:
var e = angular.element($0);var s = e.scope();s.nodes.splice(1,1);s.$apply()... 然后 $destroy 回调运行，但呈现的元素不会改变.我的指令中是否遗漏了什么?
演示:Plunker
解决方案
看来这确实是一个 bug，在 AngularJS 1.2 系列中已修复.这是使用 1.2 的更新演示 .
index.html:
<html ng-app="我的应用程序"><head lang="zh-cn"><meta charset="utf-8"><title>自定义Plunker</title><link rel="stylesheet" href="style.css"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script><script src="app.js"></script><body ng-controller="AppController"><div id="ct"><x-node ng-repeat="节点中的节点"></x-node> <button id="test">删除元素 [1]</button>
</html>app.js:
var app = angular.module('my-app', [], function () {})app.controller('AppController', function ($scope) {$scope.nodes = [{名称:'一个'}, {名称:'二'}, {名称:'三'}];})app.directive('node', function() {返回 {限制:'E'，范围:真实，templateUrl: 'node.html',替换:真的，编译:函数(tElement，tAttrs，transclude){返回 {帖子:功能(范围，iElement，iAttrs){scope.$on('$destroy', function(event) {console.log('销毁');});}};}};});$(函数(){$('#test').click(function(){var el = $('#ct').children().first();如果(el.length){var e = angular.element(el[0]);var s = e.scope();s.nodes.splice(1,1);s.$apply()}})});node.html:
{{node.name}}
I have a widget that I'm instantiating using ng-repeat. Initial creation works fine, but after that it stops updating. Here's an excerpt from index.html:
<div>
<x-node ng-repeat="node in nodes"></x-node>
</div>
partials/node.html:
<div>{{node.name}}</div>
And the directive:
angular.module('directive', []).directive('node', function() {
return {
restrict: 'E',
scope: true,
templateUrl: 'partials/node.html',
replace: true,
compile: function(tElement, tAttrs, transclude) {
return {
post: function(scope, iElement, iAttrs) {
scope.$on('$destroy', function(event) {
console.log('destroying');
});
}
};
}
};
});
If I modify the list of nodes in the console like this:
var e = angular.element($0);
var s = e.scope();
s.nodes.splice(1,1);
s.$apply()
... then the $destroy callback runs, but the rendered elements do not change. Is there something I'm missing from my directive?
Demo: Plunker
解决方案
It seems this was indeed a bug, which is fixed in the 1.2 series of AngularJS. Here's an updated demo that uses 1.2.
index.html:
<!DOCTYPE html>
<html ng-app="my-app">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppController">
<div id="ct">
<x-node ng-repeat="node in nodes"></x-node>
</div>
<button id="test">Remove element [1]</button>
</body>
</html>
app.js:
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.nodes = [{
name: 'one'
}, {
name: 'two'
}, {
name: 'three'
}];
})
app.directive('node', function() {
return {
restrict: 'E',
scope: true,
templateUrl: 'node.html',
replace: true,
compile: function(tElement, tAttrs, transclude) {
return {
post: function(scope, iElement, iAttrs) {
scope.$on('$destroy', function(event) {
console.log('destroying');
});
}
};
}
};
});
$(function(){
$('#test').click(function(){
var el = $('#ct').children().first();
if(el.length){
var e = angular.element(el[0]);
var s = e.scope();
s.nodes.splice(1,1);
s.$apply()
}
})
});
node.html:
<div>{{node.name}}</div>
这篇关于使用 ng-repeat 时，删除列表项时不会删除嵌入的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
