angular中 modal模态框（可复用）_angular modalmodule-优快云博客

本文链接：https://blog.youkuaiyun.com/cmcesummer/article/details/51090217

本文详细介绍了在 Angular 应用中如何创建一个可复用的 modal 模态框组件，包括其基本结构、使用方法以及如何在不同场景下进行复用，帮助开发者提升 UI 组件的复用性和代码的整洁性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可复用的（普通的在function中找）：点击事件之后的函数

$rootScope.confirm = function(content, okFn, cancelFn) {
    var modal = $modal({
        html: true,
        show: false,
        templateUrl: 'views/template/ptteng-confirm-0.0.1.html',
        controller: function($scope) {
            $scope.content = content;
            $scope.ok = function() {
                typeof okFn == 'function' && okFn();
                modal.$promise.then(modal.hide);
            };
            $scope.cancel = function($scope) {
                typeof cancelFn == 'function' && cancelFn();
                modal.$promise.then(modal.hide);
            };
        }
    });
    modal.$promise.then(modal.show);
};

html:

<td>
    <button class="btn btn-default btn-xs" ui-sref="field.moduleDetail({id: li.id})">编辑</button>
    <button class="btn btn-danger btn-xs" ng-click="vm.delete(li.id)">删除</button>
</td>

ngjs:

vm.delete = function(id) {

    $rootScope.confirm("您确定要删除吗？", function() {
        moduleService.deleteModule(id).then(function(res) {

            $state.go($state.current, {}, {reload: true});

        });
    });

};

模态框html

<div class="modal ng-scope top am-fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">提示</h3>
            </div>
            <div class="modal-body">
                {{content}}
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="ok()">确定</button>
                <button class="btn btn-warning" type="button" ng-click="cancel()">取消</button>
            </div>
        </div>
    </div>
</div>