transclude() и ng-repeat не играют хорошо

Question

Пытается перевести раздел HTML, содержащий инструкции ng-repeat из директивы с использованием transclude(), очень сильно ломается. Вместо того, чтобы повторять все элементы один раз каждый, он повторяет их все один раз, затем снова, затем снова, повторно, для переменного количества раз, обычно около 17 раз.

Мне досадно использовать этот довольно хакерский способ, чтобы передать содержимое, поскольку я не могу использовать нормальную директиву шаблона, а также использовать модальную функцию углового-ui-bootstrap $, которая требует, чтобы шаблон был добавляется прямо к нему.

Я сузил проблему до того, как я ввел содержимое на страницу, так как положил точку останова в пределах функции getBody() и набрал в консоль transclude(), что повторное повторение уже произошло.

Я знаю, что проблема связана не с ng-repeat, поскольку я могу скопировать содержимое внутри директивного вызова в основной HTML и поместить его непосредственно после него, а повтор работает правильно.

Любые предложения о том, что происходит не так или как исправить, оцениваются.

Ниже приводится версия урезанная кода я использую, чтобы продемонстрировать:

Главная HTML страницы:

<div data-wp-modal="{{'registration.registeredAddresses.allAddressesHead' | translate}} {{entity.type}}" 
     data-show="controller.viewModel.openOrganisationAddressModal"> 
     <table class="table" data-table-name="registeredAddresses"> 
      <tbody> 
       <tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']"> 
        <td>{{animal}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

Директива:

// @ngInject 
exports.wpModal = function(lpCoreBus, lpCoreUtils, lpWidget, $compile, $modal, $modalStack) { 

    return { 
     restrict: 'EA', 
     replace: true, 
     scope: { 
      show: "=", 
     }, 
     transclude: true, 
     link: function (scope, element, attr, ctrl, transclude) { 

      scope.$watch("show", function(newValue, oldValue) { 
       if (newValue && newValue !== oldValue) { 
        var modalInstance = $modal.open({ 
         "animation": true, 
         "scope": scope, 
         "controller": "ModalController", 
         "templateUrl": lpCoreUtils.resolvePortalPlaceholders("$(contextPath)/static/launchpad/modules/module-wp-modal/templates/modal.html"), 
         "size": "md" 

        }); 

        modalInstance.result.then(function() { 
         // User confirmed the action [performed after doConfirm()] 
         scope.buttonConfirmAction(); 

        }, function() { 
         // User cancelled the action [performed after doCancel()] 
         scope.buttonCancelAction(); 
        }); 

        scope.show = false; 
       } 

      }); 

      scope.getBody = function() { 

       for (var i = 0; i < transclude().length; i++) { 
        console.log(transclude()[i]); 
        document.querySelector(".modal-body").appendChild(transclude()[i]); 
       } 
      } 


     } 
    }; 
}; 

Модальные шаблон:

<div data-ng-init="getBody()"> 

    <div class="modal-body"> 
    </div> 


</div> 

Out говоря:

<div class="modal-body"> 
    <table class="table ng-scope" data-table-name="registeredAddresses"> 
     <tbody> 
      <!-- ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">cat</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">dog</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">bird</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope"> 
       <td class="ng-binding">turtle</td> 
      </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --> 
     </tbody> 
    </table> 
</div> 

Plunker: http://plnkr.co/edit/8DD1rgTYOLYHAtsLdm9s?p=preview

Answer 1

Я полагаю, что проблема заключается в том, что вы вызываете transclude() несколько раз, ссылки на одни и те же элементы DOM несколько раз. Чтобы убедиться в этом вы можете установить контрольную точку внутри ngRepeatLink функции

return function ngRepeatLink($scope, $element, $attr, ctrl, $transclude) { 

в angular.js источников. Чтобы избежать этого, вы можете использовать этот код:

app.directive('test', function() { 
    return { 
     transclude: true, 
     scope: { 
      show: '=' 
     }, 
     link: function(scope, element, attr, ctrl, transclude) { 
      var linked = transclude(); 
      for (var i = 0; i < linked.length; i++) { 
       element.append(linked[i]); 
      } 
     } 
    }; 
}); 

Или это даже лучше:

app.directive('test', function() { 
    return { 
     transclude: true, 
     scope: { 
      show: '=' 
     }, 
     link: function(scope, element, attr, ctrl, transclude) { 
      var linked = transclude(); 
      element.append(linked); 
     } 
    }; 
}); 

Как правило, вы не должны добавлять DOM, созданный в соответствии с директивой вне элемента директивы, так что я приложил в директиве элемент.