gpt4 book ai didi

javascript - 当指令手动替换元素的内容时,ngRepeat 不会删除旧条目

转载 作者:行者123 更新时间:2023-12-03 12:18:36 25 4
gpt4 key购买 nike

我有一个指令,它根据范围的某些状态使用不同的模板,如下所示:

app.directive('foo', function($compile) {
return {
restrict: 'E',
scope: {
bar: '='
},
link: function(scope, element) {
var tpl = scope.bar == 'foo' ? '<li><strong>{{bar}}</strong</li>' : '<li>{{bar}}</li>'
element.replaceWith($compile(element.html(tpl).contents())(scope))
}
}
});

如果我在 ngRepeat 循环中使用此指令,并且使用的数组已更改渲染的新元素,但旧元素不会消失。

<ul>
<foo bar="bar" ng-repeat="bar in bars"></foo>
</ul>

查看现场演示:http://plnkr.co/edit/UnsrjPh8kW27bK8RbPgY

谁能指出我做错了什么?

最佳答案

这是因为 ng-repeat 和指令创建了自己的作用域。尝试在 ng-repeat 中使用指令...它对我有用..

html...

<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<p><button ng-click="changeBars()">Change bars</button></p>
<ul>
<li ng-repeat="bar in bars"><foo bar="bar">{{bar}}</foo></li>
</ul>
</body>

和指令..

app.directive('foo', function($compile) {
return {
restrict: 'E',
scope: {
bar: '='
},
link: function(scope, element) {
var tpl = scope.bar == 'foo' ? '<p><strong>{{bar}}</strong</p>' : '<p>{{bar}}</p>'
element.replaceWith($compile(element.html(tpl).contents())(scope))
}
}
});

http://plnkr.co/edit/4YZ0CQZ4Ufck07IlOckB?p=preview

关于javascript - 当指令手动替换元素的内容时,ngRepeat 不会删除旧条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24548988/

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