[AngularJS]动态加载 Bootstrap modal内容和使用 Angular.js 打开它

发布时间: 2017/4/16 21:19:51
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想动态加载模式内容和用户单击按钮时打开它。我已经设法动态加载的内容使用 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 的内容加载完美,但modal看不出来。如果我再次单击,我只能看到背后modal,涂黑的屏幕,但不是modal本身是透明的黑色层。

谢谢你 !

解决方法 1:

你能解决这个问题,使用大量的技术。有几个的模块,提供modal的服务,包括 angular-ui ,我觉得这些可以解决你的问题好 (及以上)。

角modal服务

角modal服务是一个致力于创造情态动词的模块。它允许提供的模板或模板的服务,并支持定义你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', ['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 引导

用户界面引导角 ( 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 ,或创建存根 (stub) 元素后专区从 detectLoaded 功能,使不显示的存根 (stub) 元素,您可以返回 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;
};
赞助商