AngularJS - 在指令内的每个ng-repeat迭代中附加元素

Question

我在一个<tr>元素中使用了一个ng-repeat 和一个指令.

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-show <tr>).我错过了一些明显的东西吗

Answer 1

你没有在你的孩子内部获得Angular绑定的原因是你没有编译它.当链接函数运行时,元素已经被编译,因此,Angular增强了.你所要做的就是$compile手工制作你的内容.首先,不要评估您的模板,否则您将丢失绑定提示.

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,则所有Angular元素都已经是jQuery增强元素.

最后,解决所需问题的正确方法是使用指令compile函数(读取'编译过程,指令匹配'和'编译函数')在编译之前修改元素.

作为最后的努力,阅读整个指令指南,这是一个宝贵的资源.