AngularJS - 附加元素,每个NG重复迭代指令内(AngularJS - Append e

2019-08-18 09:05发布

我使用一个内部的NG-重复<tr>元件连同一个指令。

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

虽然我可以追加新的<tr>到每次迭代元件,我无法得到它被添加到DOM之后执行角代码(例如,NG-节目内的<tr> 我失去了一些东西明显?

Answer 1:

为什么你没有得到你的角儿里面绑定的原因是因为你缺乏编译它 。 当链接功能运行时,该元素已编译,因而,角增加。 所有你要做的就是到$compile用手内容。 首先,不要EVAL您的模板,否则你将失去你的绑定提示。

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的增强元素。

最后,要解决你所需要的正确的方法是使用指令compile功能(读“编译过程,并指示匹配”和“编译功能” )要修改其编译之前元素。

作为最后的努力,阅读整个指令引导 ,这是一种宝贵的资源。



文章来源: AngularJS - Append element to each ng-repeat iteration inside a directive