Récupérer intérieure HTML de AngularJS directive avant le templateUrl la remplace

J'ai une directive-je utiliser pour la validation d'un formulaire standard qui j'ai récemment refait. Permettez-moi d'expliquer la directive, un peu plus loin avant de l'étendre.

La directive d'utilisation:

<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>

Précédemment, mon directive cherché quelque chose comme ça, et il travaillé.

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);

        }
    }
});

Le modèle html devenait compliqué, et je voulais terminer les boutons 'à l'intérieur du modèle, plutôt que d'après eux. J'ai donc refait dans ce que je pensais était un bien meilleur directive.

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(' ', '') === '')
            };

        }
    };
}]);

Donc ce que je m'aperçois que element.html() récupère le contenu de la templateUrl au lieu de le contenu de l'intérieur HTML de mon directive. Sinon, comment puis-je obtenir le contenu de mon directive avant, il est remplacé par le templateUrl?

OriginalL'auteur francisco.preller | 2013-11-21

  1. 10

    Pour accéder à la iniital html pouvez utiliser $transclude dans la directive du contrôleur. C'est une légère modification à partir de versions antérieures de sorte suppose que l'on utilise 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();
      });

    }

    DÉMO

    C'est exactement ce que vous dites et c'est la bonne réponse, mais en tant que suivi de liaison de l'HTML dans le templateUrl par ng-bind-html à l'aide de $sce.trustAsHtml() est gâcher la sur les événements qui sont passés à l'étendue. Est-ce dû à la présence d'un nouveau contrôleur dans la directive?
    pas sûr pourquoi vous utiliser pour être honnête... il suffit de passer le code html de portée n'aurez pas compilé. Créer de démonstration. Globalement je suis un peu confus au sujet de ce que vous faites....juste vous a donné un moyen d'accéder à l'html comme demandé. Vous pouvez utiliser plunker pour importer les templateURL...il suffit de créer un fichier avec le code html à modifier l'url pour le même répertoire que le fichier)
    Merci, va pirater loin à un peu plus de temps. Et publierons une mise à jour si je trouve que la question est. Probablement quelque chose à voir avec mon code. Comme je l'ai dit, c'est la bonne réponse à la question réelle, peu importe, merci!
    comment cela peut-il fonctionner? $transclude n'arrive pas à être injecté dans le contrôleur.
    Vous devez ajouter une transclude: true dans la directive retour func (où le link func est souvent le cas)

    OriginalL'auteur