角模态服务

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();
        });
    };
}]);

角-UI-自举

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（）之前，您可能希望先给角度一些时间来加载并渲染已加载的模板。如果你没有注意到，你的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以使stub元素不显示。我没有测试过最后一个选项，也不知道它是否可行，你必须检查。

<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

动态加载Bootstrap模态内容并使用Angular.js打开它

2 个答案:

角模态服务

角-UI-自举

使用您的方法

Ts 文件