Rufen Sie das innere HTML der AngularJS-Direktive ab, bevor TemplateUrl es überschreibt

Question

Ich habe eine Direktive, die ich für die Formvalidierung verwendet, die ich vor kurzem überarbeitet habe. Erlauben Sie mir, die Richtlinie ein wenig weiter zu erläutern, bevor ich sie erweitere.

Die Richtlinie Nutzung:

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

Zuvor sah meine Richtlinie so etwas, und es arbeitete.

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

     } 
    } 
}); 

HTML-Template wurde immer chaotisch, und ich wollte, dass die Tasten ‚innen‘ der Vorlage wickeln, anstatt sie nach. Also überlegte ich, was ich für eine viel bessere Richtlinie hielt.

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

     } 
    }; 
}]); 

Was ist also ich bemerken, dass element.html() nun den Inhalt des templateUrl ruft anstelle des Inhalts der inneren HTML meine Richtlinie. Wie sonst kann ich den Inhalt meiner Direktive abrufen, bevor sie von TemplateUrl überschrieben wird?

Answer 1

Für den Zugriff auf die iniital html kann $transclude in Directive Controller verwenden. Dies ist eine geringfügige Änderung von früheren Versionen so annimmt mit 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