动态加载 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