動態加載 Bootstrap 模態內容並使用 Angular.js 打開它

Question

我正在嘗試動態加載模態內容並在用戶單擊按鈕時打開它。 我已設法使用 ngInclude 動態加載內容，但之后無法打開它。 我的代碼：

<div class="modal-container" id="modal-container" ng-include="modal_template"></div>

和我的 controller.js

function set_modal_template(templateName, callback) {
    $scope.modal_template = templateName;
    callback();
}

$scope.load_modal_sms = function () {
    set_modal_template("/static/partials/modal_template.html", function() {
        $('#modal').modal('show');
    });
};

和我的modal_template.html：

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

發生的事情是 modal_content.html 的內容完美加載，但模態沒有顯示。 如果我再次單擊，我只能看到模態后面的透明黑色層，使屏幕變黑，而不是模態本身。

謝謝！

Answer 1

您可以使用多種技術來解決此問題。 有一些模塊可以提供模態服務，包括 angular-ui，我認為這些可以更好地（甚至更多）解決您的問題。

角度模式服務

angular-modal-service是一個專門用於創建模態的模塊。 它允許提供模板或模板服務，並支持為您的模態定義范圍（對抽象有用）。

您上面的示例代碼將是

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

// Do not forget to include the module dependency: var myApp = angular.module('myApp', ['angularModalService']);
myApp.controller('MyController', ['ModalService', function (ModalService) {
    $scope.load_modal_sms = function () {
        var modal = ModalService.showModal({
          templateUrl: "/static/partials/modal_template.html",
          controller: function () { /* controller code */ }
        }).then(function (modal) {
            // Modal has been loaded...
            modal.element.modal();
        });
    };
}]);

angular-ui-bootstrap

angular-ui-bootstrap ( bower install angular-ui-bootstrap ) 有一個非常容易使用的$modal服務：

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

// Do not forget to include the module dependency: var myApp = angular.module('myApp', ['ui.bootstrap.modal']);
myApp.controller('MyController', ['$modal', function ($modal) {
    $scope.load_modal_sms = function () {
        var modal = $modal.open({
          templateUrl: "/static/partials/modal_template.html",
          scope: { /* custom scope */ }
        });
    };
}]);

使用你的方法

在嘗試 .modal() 之前，您可能希望先給 angular 一些時間來加載和渲染加載的模板。 如果你沒有注意到，你的callback並沒有做任何特別的事情。 您也可以在沒有任何回調的情況下運行代碼。

<div class="modal fade" id="modal" role="dialog" ng-if="detectLoaded()">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

function set_modal_template(templateName) {
    $scope.modal_template = templateName;
}

$scope.load_modal_sms = function () {
    set_modal_template("/static/partials/modal_template.html");
};

$scope.detectLoaded = function () {
    // If this function is called, the template has been loaded...
    setTimeout(function () { // Give some time for the template to be fully rendered
        $('#modal').modal('show');
    }, 10);
    return true;
};

您還可以通過更改 ng-if 的位置或在 div 之后創建存根元素來刪除超時。 您可以從 detectLoaded 函數返回 false 以使存根元素不顯示。 我還沒有測試過最后一個選項，不知道它是否有效，你必須檢查一下。

<div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog" modal-sm>
        <div class="modal-content">
            <div class="modal-header">
                <h4>Pop-up head. Email</h4>
            </div>
            <div class="modal-body">
                <h4>Pop-up body.</h4>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<div ng-if="detectLoaded()"></div>

$scope.detectLoaded = function () {
    $('#modal').modal('show');
    return false;
};

Answer 2

我們在 Angular 11 點擊事件Go 中使用帶有動態內容的打開引導模式彈出窗口

<div class="container text-center my-5">
   <h2>Open Bootstrap Modal Popup With Dynamic Content Angular 11</h2>
   <!-- Button to Open the Modal -->
   <button type="button" class="btn btn-primary text-center" (click) = "show()">
     Open modal
   </button>
 <style>
    .c{
      margin-top: 169px;
    }
 </style>
   <!-- The Modal -->
   <div class="modal c" id="myModal" [style.display]="showModal ? 'block' : 'none'">
     <div class="modal-dialog">
       <div class="modal-content">
       
         <!-- Modal Header -->
         <div class="modal-header">
           <h4 class="modal-title">{{ title }}</h4>
           <button type="button" class="close" data-dismiss="modal" (click) = "hide()">&times;</button>
         </div>
         
         <!-- Modal body -->
         <div class="modal-body">
           {{ content }}
         </div>
         
         <!-- Modal footer -->
         <div class="modal-footer">
           <button type="button" class="btn btn-danger" data-dismiss="modal" (click) = "hide()">Close</button>
         </div>
         
       </div>
     </div>
   </div>
 </div>

Ts文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  showModal: boolean = false;
  content: any;
  title: any;


  //Bootstrap Modal Open event
  show() {
    this.showModal = true; // Show-Hide Modal Check
    this.content = "Welcome to phpcodingstuff.com we learn Open Bootstrap Modal Popup With Dynamic Content  "; // Dynamic Data
    this.title = "This tutorial phpcodingstuff.com";    // Dynamic Data
  }
  //Bootstrap Modal Close event
  hide() {
    this.showModal = false;

  }

}

原始來源https://www.phpcodingstuff.com/blog/open-bootstrap-modal-popup-with-dynamic-content-angular-11.html