AngularJS — добавить элемент к каждой итерации ng-repeat внутри директивы

Я использую ng-repeat внутри элемента <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-show внутри <tr>). Я упускаю что-то очевидное?


person knoefel    schedule 31.03.2013    source источник


Ответы (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 (читайте 'Процесс компиляции и директиву соответствия" и "Компилировать функцию") для изменения элементов перед компиляцией.

В качестве последнего усилия прочитайте все руководство по директиве, это ценный ресурс.

person Caio Cunha    schedule 31.03.2013