4

ユーザーがボタンをクリックしたときにモーダルを表示するディレクティブを作成しています:

ディレクティブ テンプレート:

<button ng-click="showModal()">Show Modal</button>

ディレクティブの使用法:

<modal-btn>
  <div id="modal-content">
    <p>This is the modal content that I want to render in the Modal {{someModel}}</p>
  </div>
</modal-btn>

したがって、ディレクティブをコンパイルする前に、コンテンツを取得してボタンを表示し、ユーザーがボタンをクリックすると、<div id="modal-content">....

コンパイルしてテンプレートに置き換える前に、ディレクティブの内部コンテンツを取得する方法

4

1 に答える 1

4

うーん..実際には、このようなローカル コンテンツでモーダルを使用するための非常に興味深いパターンです。

したがって、それを達成するために必要なのはtransclude、角度ディレクティブのオプションだけです。transclude に関する良い記事があります。

HTML

<modal-btn>
  <div class="modal-content">
    Lorem Ipsum Dolor Sit Amet `{{currentScopeData}}`
  </div>
</modal-btn>

モーダル btn ディレクティブとその中にモーダル コンテンツを作成します。式を見てみましょう - この時点で、実際にcurrentScopeData現在のスコープ (ページのコントローラーなど) から を使用できます。

指令テンプレート

<button ng-click="showModal()">Show Modal</button>

あなたのような ng-click のボタンだけです。

指令

App.directive('modalBtn', ['Config', function (Config) {

    function link(scope, element, attrs, ctrl, transclude) {

        // Get your modal holder element which may be located anywhere in your application
        var modalHolder = angular.element(document.querySelector('#modal-holder'));

        /**
         * Get transcluded content (which is located inside <modal-btn></modal-btn>)
         *     and set it into scope
         */
        transclude(scope, function(clone, scope) {
            scope.modalContent = clone;
        });

        /**
         * On button click set our transcluded content to the modal holder area 
         */
        scope.showModal = function () {
            modalHolder.empty().append(scope.modalContent);
        }
    }

    return {
        templateUrl: Config.rootPath + 'shared/modal/modal-btn-view.html',
        link: link,
        replace: true,
        // Set transclude option
        transclude: true
    };
}]);

すべてのアクションがコメントされます。通常、ディレクティブ内で提供されるトランスクルージョン関数から内部コンテンツを取得し、それをスコープに設定します。ユーザーがボタンをクリックすると、showModal が起動し、html ファイルのどこかにあるモーダル ホルダーにコンテンツを挿入します。

コンテンツが挿入された後、機能を示すモーダルを提供する必要があります (modalHolder にクラスを追加するか、それはあなた次第です)。

于 2015-05-17T19:01:23.687 に答える