问题描述
我有我使用 NG-重复实例化一个小部件。最初创建工作正常，但之后，它将停止更新。下面是从节选的index.html ：
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>
谐音/ node.html：
partials/node.html:
<div>{{node.name}}</div>
和指令：
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?
演示：
推荐答案
看来这确实是一个错误，这是固定在1.2系列AngularJS的。 。
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的：
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：
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：
node.html:
<div>{{node.name}}</div>
这篇关于不Transcluded元素被使用NG重复时去除列表项的删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！