angularjs - Angular ディレクティブ内の HTML にアクセスする方法 (Transclusion)

Question

angular-uiを使用しています。angularディレクティブを使用して再利用可能な要素を作成するhtmlコーディングを削減しようとしています。私は間違いなく何かが欠けています。私がやりたいことはこれです：

<modal modal-title="Some Title" button-text="Click Me">Modal Content</modal>

そして、モーダルとボタンを出力したいので、モーダルにすべてのマークアップを何度も追加する代わりに、このカスタム要素を使用できます。要素内のコンテンツを取得する方法を一生理解できないことを除いて、機能しているようです。私がやっていることの基本は次のとおりです。

angular.module('app').directive('modal', function () {
    return {
        templateUrl: 'partials/modal.html',
    restrict: 'E',
    controller: 'modalController',
    controllerAs: 'mCtrl',
    transclude: true,
        link: function postLink(scope, element, attrs) {
            scope.buttonText = attrs.buttonText;
            scope.modalTitle = attrs.modalTitle;
        }
    };
}).controller('modalController', function($scope,$modal,$attrs) {
    var _this = this;
    this.buttonText = $attrs.buttonText;
    this.modalTitle = $attrs.modalTitle;

    this.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'modal-content.html',
            controller: 'ModalInstanceCtrl',
            controllerAs: 'miCtrl',
            resolve: {
                modalTitle: function() { return _this.modalTitle; }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            //something
        }, function () {
            console.info('Modal dismissed at: ' + new Date());
        });
    };

    this.save = function() {
        //something
    };

}).controller('ModalInstanceCtrl', function ($scope, $modalInstance, modalTitle) {
    this.modalValue = 1;
    this.modalTitle = modalTitle;
    this.ok = function () {
        $modalInstance.close(this.modalValue);
    };

    this.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

テンプレートはこちら (partials/modal.html)

<script type="text/ng-template" id="modal-content.html"> 
    <div class="modal-header"> 
        <h3 class="modal-title">{{miCtrl.modalTitle}}</h3> 
    </div> 
    <div class="modal-body"> {{ mCtrl.content }} </div> 
    <div class="modal-footer"> 
        <button class="btn btn-primary" ng-click="miCtrl.ok()">OK</button> 
        <button class="btn btn-warning" ng-click="miCtrl.cancel()">Cancel</button> 
    </div> 
</script>

<button class="btn btn-default" ng-click="mCtrl.open()">{{mCtrl.buttonText}}</button>

要素のコンテンツを mCtrl.content に取得するにはどうすればよいですか? 残りの部分は期待どおりに機能しますが、何かが足りないだけです。ありがとう！

編集：トランスクルージョンを使用する必要があるようですので、これが私がやりたいことです：

<div class="modal-body"><ng-transclude></ng-transclude></div>

しかし、モーダルを開くと、この種のエラーが発生します。

[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <ng-transclude>