与templateUrl和NG-重复自定义指令 [英] Custom directive with templateUrl and ng-repeat

问题描述

我已经指导员研究这个问题了几个小时，终于我复制它plunker 。

这是我的问题：

在自定义的指令，它使用外部资源作为模板与NG-重复结合起来，认为没有正确而改变模型渲染。

在我的例子中，点击链接将取代模式，但旧的数据还没有被清理。

如果我使用模板：StringTemplate的而不是 templateUrl：urlToTemplate，它只是正常工作。
仍然不知道它是否是一个错误或东西...

偏code：

  angular.module（测试，[]）
    .RUN（函数（$ rootScope）{
        $ rootScope.topics = [{
            内容：单击此处更改回复'，
            回信：[{
                内容：回复的测试......，
            }]
        }];
    }）
    .directive（'话题'，函数（）{
        返回{
            更换：真实，
            限制：'E'，
            templateUrl：topic.htm'，
            链接：功能（范围）{
                scope.reply =功能（输入）{
                    scope.topic.replys = {[内容：回复测试...应及时更换，但它\\'不是'！ }];
                }
            }
        };
    }）
    .directive（'回复'，函数（）{
        返回{
            更换：真实，
            限制：'E'，
            //模板：'＆LT; D​​IV＆GT;＆LT; D​​IV NG绑定=reply.content＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;' //这工作正常
            templateUrl：reply.htm'//相同的内容
        };
    }）;
 

解决方案

我做了一些研究，似乎你在这个问题上你并不孤单：

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

用户ishw提到，作为一个快速修复：

对于那些谁可能没有意识到它尚未：。这是因为你的NG-重复是在你的指令的模板根元素包装你的NG-重复中的任何元素，它会被罚款

我想这与你的plunkr，它似乎是工作：

 ＆LT; D​​IV＆GT;
      ＆LT; D​​IV CLASS =主题NG绑定=topic.contentNG点击=回复（）＆GT;＆LT; / DIV＆GT;
      ＆LT; D​​IV NG重复=，在topic.replys回复＆GT;＆LT;答复和GT;＆LT; /回复＆GT;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

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-重复自定义指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！