टेम्पलेट से पहले AngularJS निर्देश के आंतरिक HTML को पुनर्प्राप्त करें Url इसे ओवरराइड करता है

Question

मेरे पास एक निर्देश है जिसका उपयोग मैं फॉर्म सत्यापन बॉयलरप्लेट के लिए करता हूं जिसे मैंने हाल ही में दोबारा प्रतिक्रिया दी थी। मुझे विस्तार से पहले थोड़ा आगे निर्देश की व्याख्या करने की अनुमति दें।

निर्देश उपयोग:

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

इससे पहले, मेरी निर्देश कुछ इस तरह देखा, और यह काम किया।

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

     } 
    } 
}); 

एचटीएमएल टेम्पलेट गन्दा हो रहा था, और मैं उनके बजाय टेम्पलेट के 'अंदर' बटन लपेटना चाहता था। इसलिए मैंने जो कुछ सोचा था वह एक बेहतर निर्देश था।

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

     } 
    }; 
}]); 

तो क्या मैं देख रहा हूँ कि element.html() अब मेरे निर्देश के भीतर एचटीएमएल की सामग्री के बजाय templateUrl की सामग्री को पुन: प्राप्त करता है। टेम्पलेट यूआरएल द्वारा ओवरराइड होने से पहले मैं अपने निर्देश की सामग्री कैसे प्राप्त कर सकता हूं?

Answer 1

इनइटल एचटीएमएल तक पहुंचने के लिए निर्देशक नियंत्रक के भीतर $transclude का उपयोग कर सकते हैं। यह पूर्व संस्करणों से एक मामूली बदलाव इसलिए का उपयोग कर मान लिया गया है 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