templateUrlが上書きする前にAngularJSディレクティブの内部HTMLを取得

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

     } 
    } 
}); 

htmlテンプレートが乱雑になり、テンプレートの内側にあるボタンをラップしたいと思いました。だから、私はもっと良い指示であると思ったものにリファクタリングしました。

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の内容の代わりに、私の指示の内側のHTMLの内容を取得することです。 templateUrlによって上書きされる前に、私のディレクティブの内容をどのように取得できますか？

Answer 1

iniital htmlにアクセスするには、ディレクティブコントローラ内で$transcludeを使用できます。渡されたHTMLを結合 - これは、ようにフォローアップが、これは、あなたが言うまさに行い、正しい答えである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