我已经研究这个问题几个小时了,终于我在 plunker 上复制了它.
这是我的问题:
当使用外部资源作为模板的自定义指令与 ng-repeat 结合使用时,模型更改时视图无法正确渲染。
在我的示例中,单击链接将替换模型,但旧数据尚未清除。
如果我使用template: 'stringTemplate'
代替templateUrl: 'urlToTemplate'
,它工作得很好。
还是不知道是bug还是什么...
部分代码:
angular.module('test', [])
.run(function($rootScope) {
$rootScope.topics = [{
content: 'Click here to change reply',
replys: [{
content: 'Reply test...',
}]
}];
})
.directive('topic', function() {
return {
replace: true,
restrict: 'E',
templateUrl: 'topic.htm',
link: function(scope) {
scope.reply = function(input) {
scope.topic.replys = [{ content: '"Reply test..." should be replaced, but it\'s not!' }];
}
}
};
})
.directive('reply', function() {
return {
replace: true,
restrict: 'E',
// template: '<div><div ng-bind="reply.content"></div></div>' //this works fine
templateUrl: 'reply.htm' // same content
};
});
我做了一些研究,看来你并不孤单地遇到这个问题:
https://github.com/angular/angular.js/issues/2151
用户 ishw 提到,作为一个快速修复:
“对于那些可能还没有意识到的人:这是因为你的 ng-repeat 位于指令模板中的根元素上。将 ng-repeat 包装在任何元素中就可以了。”
我用你的 plunkr 尝试了这个,它似乎有效:
<div>
<div class="topic" ng-bind="topic.content" ng-click="reply()"></div>
<div ng-repeat="reply in topic.replys"><reply></reply></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)