带有 templateUrl 和 ng-repeat 的自定义指令 [英] Custom directive with templateUrl and ng-repeat

问题描述

我已经研究这个问题好几个小时了，最后 我在 plunker 上复制了它.

这是我的问题:

当使用外部资源作为模板的自定义指令与 ng-repeat 结合使用时，视图在模型更改时无法正确呈现.

在我的示例中，单击链接将替换模型，但旧数据尚未清除.

如果我使用 template: 'stringTemplate' 而不是 templateUrl: 'urlToTemplate'，它就可以正常工作.仍然不知道这是一个错误还是什么......

部分代码:

angular.module('test', []).run(function($rootScope) {$rootScope.topics = [{content: '点击这里更改回复',回复:[{content: '回复测试...',}]}];}).directive('topic', function() {返回 {替换:真的，限制:'E'，templateUrl: 'topic.htm',链接:功能(范围){scope.reply = 函数(输入){scope.topic.replys = [{ content: '"Reply test..." 应该被替换，但它\'s not!'}];}}};}).directive('回复', function() {返回 {替换:真的，限制:'E'，//模板:'<div><div ng-bind="reply.content"></div></div>'//这工作正常templateUrl: 'reply.htm'//相同的内容};});

解决方案

我做了一些研究，看来你不是一个人遇到这个问题:

https://github.com/angular/angular.js/issues/2151

用户 ishw 提到，作为快速修复:

对于那些可能还没有意识到的人:这是因为您的 ng-repeat 位于指令模板中的根元素上.将您的 ng-repeat 包裹在任何元素中，就可以了."

我用你的 plunkr 尝试了这个，它似乎有效:

 
<div class="topic" ng-bind="topic.content" ng-click="reply()"></div><div ng-repeat="reply in topic.replys"><reply></reply></div>

I've been reseaching this issue for hours, and finally i reproduced it on plunker.

Here's my issue:

When a customized directive which using external resource as template is combined with ng-repeat, the view didn't render correctly while model changed.

In my example, clicking link will replace the model, but old data hasn't been cleaned.

And if i using template: 'stringTemplate' instead of templateUrl: 'urlToTemplate', it just works fine. Still no idea if it's a bug or something...

Partial code:

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
        };
    });

解决方案

I did some research and it seems you're not alone in this issue:

https://github.com/angular/angular.js/issues/2151

User ishw mentions, as a quick fix:

"For those who may have not realized it yet: it's because your ng-repeat is on the root element in your directive's template. Wrap your ng-repeat in any element and it'll be fine."

I tried this with your plunkr and it seems to be working:

  <div> 
      <div class="topic" ng-bind="topic.content" ng-click="reply()"></div>
      <div ng-repeat="reply in topic.replys"><reply></reply></div>
  </div>

这篇关于带有 templateUrl 和 ng-repeat 的自定义指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！