うーん..実際には、このようなローカル コンテンツでモーダルを使用するための非常に興味深いパターンです。
したがって、それを達成するために必要なのは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 にクラスを追加するか、それはあなた次第です)。