AngularJS - 附加元素，每个纳克重复迭代里面的指令 [英] AngularJS - Append element to each ng-repeat iteration inside a directive

问题描述

我使用的是内部的NG-重演＆LT; TR方式＆gt; 与指令一起元素

I'm using a ng-repeat inside a <tr> element together with a directive.

HTML：

<tbody>
  <tr ng-repeat="row in rows" create-table>
    <td nowrap ng-repeat="value in row | reduceString>{{value}}</td>
  </tr>
</tbody>

指令：

app.directive('createTable', function () {
        return {

            link: function (scope, element, attrs) {
                var contentTr = scope.$eval('"<tr ng-show=&quot;false&quot;><td>test</td></tr>"');
                $(contentTr).insertBefore(element);
            }
        }
    }
);

虽然我可以追加一个新的＆LT; TR＆GT; 元素每次迭代中，我没能得到角code执行它被添加到后DOM（例如＆LT内部的NG-秀; TR＆GT; ）。我失去了一些东西明显？

Although I can append a new <tr> element to each iteration, I'm not able to get angular code executed after it's been added to the DOM (for example the ng-show inside the <tr>). Am I missing something obvious?

推荐答案

你之所以没有得到角您的孩子里面绑定是因为您缺少的编译它。当链路功能运行时，该元件已被编译，从而，角增加。所有你要做的就是 $编译内容手。首先，不要EVAL您的模板，否则你将失去你的绑定提示。

The reason why you don't get Angular binding inside your child is because you lack compiling it. When the link function runs, the element has already been compiled, and thus, Angular augmented. All you got to do is to $compile your content by hand. First of, don't eval your template, or you will lose your binding tips.

app.directive('createTable', function ($compile) {
  return {
    link: function (scope, element, attrs) {
      var contentTr = angular.element('<tr ng-show=&quot;false&quot;><td>test</td></tr>');
      contentTr.insertBefore(element);
      $compile(contentTr)(scope);
    }
  }
});

另一个提示：你永远不括在您的jQuery元素（$）。如果你在你的页面有jQuery的，所有的角元素已经是jQuery的增强元素。

Another tip: you never enclose your elements in jQuery ($). If you have jQuery in your page, all Angular elements are already a jQuery augmented element.

最后，要解决你所需要的正确的方法是使用指令编译函数（读的编译过程，并指令匹配和编译功能）将其编译之前修改元素。

Finally, the correct way to solve what you need is to use the directive compile function (read 'Compilation process, and directive matching' and 'Compile function') to modify elements before its compilation.

作为最后的努力，读取整个指令指南，这是一种宝贵的资源。

As a last effort, read the entire Directive guide, this is a valuable resource.

这篇关于AngularJS - 附加元素，每个纳克重复迭代里面的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！