javascript - Recupere el código HTML interno de la directiva AngularJS antes de que templateUrl lo invalide

Question

Tengo una directiva que utilizo para la plantilla de validación de formularios que he refactorizado recientemente. Permítanme explicar un poco más la directiva antes de expandir.

El uso de la directiva:

<form class="form-horizontal" name="personalDetails" validated-form>

    <!-- Pass buttons into form through here -->
    <a href="" class="btn btn-success" 
        data-ng-click="saveDetails()"
        data-ng-disabled="!personalDetails.$valid">Save Changes</a>

</form>

Anteriormente, mi directiva tenía un aspecto similar a este, y funcionó .

app.directive(''validatedForm'', function($compile, $sce) {
    return {
        restrict: ''A'',
        scope: true,
        link: function(scope, element, attrs) {

            var template = //... HTML boilerplate code
            var buttons  = element.html(); // Get contents of element before overriding

            element.html(template + buttons);
            $compile(element.contents())(scope);

        }
    }
});

La plantilla html se estaba volviendo desordenada, y quería envolver los botones ''adentro'' de la plantilla, en lugar de después de ellos. Así que volví a entrar en lo que pensé que era una directiva mucho mejor.

app.directive(''validatedForm'', [''$compile'', ''$sce'', function ($compile, $sce) {

    var domContent = null;

    return {
        restrict: ''AE'',
        scope: true,
        templateUrl: ''/Content/ngViews/directives/validated-form.html'',
        link: function(scope, element, attrs) {

            // This now returns the contents of templateUrl 
            // instead of what the directive had as inner HTML
            domContent = element.html(); 

            // Scope
            scope.form = {
                caption: attrs.caption,
                location: ''Content/ngViews/forms/'' + attrs.name + ''.html'',
                buttons: $sce.trustAsHtml(domContent),
                showButtons: !(domContent.replace('' '', '''') === '''')
            };

        }
    };
}]);

Entonces, lo que estoy notando es que element.html () ahora recupera el contenido de templateUrl en lugar del contenido del HTML interno de mi directiva. ¿De qué otra manera puedo obtener el contenido de mi directiva antes de que la plantillaUrl la anule?

Answer 1

Para acceder al sitio web, html puede usar $transclude dentro del controlador de la directiva. Este es un ligero cambio respecto a las versiones anteriores, por lo que se supone que usa 1.2

controller:function($scope,$transclude){
      $transclude(function(clone,scope){
        /* for demo am converting to html string*/
         $scope.buttons=angular.element(''<div>'').append(clone).html();
      });

    }

DEMO