Mam problem z używaniem dyrektywy ng-repeat w połączeniu z moją własną dyrektywą niestandardową.

HTML:

<div ng-app="myApp">
  <x-template-field x-ng-repeat="field in ['title', 'body']" />
</div>

JS:

angular.module('myApp', [])
    .directive('templateField', function () {
        return {
            restrict: 'E',
            compile: function(element, attrs, transcludeFn) {
                element.replaceWith('<input type="text" />');
            }
        };
    });

WidziećjSFiddle

Problem polega na tym, że nic nie jest zastępowane. To, co próbuję osiągnąć, to wyjście 2x pól wejściowych, z tagami „x-template-field” całkowicie zastąpionymi w DOM. Podejrzewam, że ponieważ ng-repeat modyfikuje DOM w tym samym czasie, to nie zadziała.

Wedługto Pytanie o przepełnienie stosu, zaakceptowana odpowiedź wydaje się wskazywać, że faktycznie działało to we wcześniejszych wersjach AngularJS (?).

Czy element.html („...”) nie działa?

Podczas gdy element.html ('...') faktycznie wstrzykuje wygenerowany HTML do elementu docelowego, nie chcę, aby HTML był elementem potomnym znacznika szablonu, ale raczej zastępował go całkowicie w DOM.

Dlaczego nie zawijam tagu szablonu innym tagiem, który ma dyrektywę ng-repeat?

Zasadniczo, z tego samego powodu, co powyżej, nie chcę, aby mój wygenerowany kod HTML był elementem podrzędnym powtarzającego się znacznika. Chociaż prawdopodobnie działałoby to przyzwoicie w mojej aplikacji, nadal czułbym się, jakbym dostosował moje znaczniki do Angular, a nie odwrotnie.

Dlaczego nie używam właściwości „szablonu”?

Nie znalazłem sposobu na zmianę kodu HTML pobranego z właściwości „template” / „templateUrl”. HTML, który chcę wstrzyknąć, nie jest statyczny, jest generowany dynamicznie z danych zewnętrznych.

Czy jestem zbyt wybredny z moją marżą?

Prawdopodobnie. :-)

Każda pomoc jest doceniana.