【总结】angular-ui-bootstrap

最新推荐文章于 2025-06-02 09:18:58 发布

原创最新推荐文章于 2025-06-02 09:18:58 发布 · 958 阅读

0 ·

CC 4.0 BY-SA版权

前端学习同时被 2 个专栏收录

41 篇文章

订阅专栏

angularJs

10 篇文章

订阅专栏

本文介绍如何在AngularJS项目中使用Bootstrap和ui-bootstrap插件创建带动画效果的模态窗口，包括设置backdrop、keyboard等属性，以及通过$uibModal服务打开模态框的方法。

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

要配合angular.js和bootstrap.css

https://www.bootcdn.cn/angular-ui-bootstrap/ 下载js文件

https://v3.bootcss.com/getting-started/#download bootstrap下载

https://www.cnblogs.com/pilixiami/p/5677515.html 博客参考

1、弹出模态窗口 $modal $uibModal

导入ui-bootstrap-tpls.js 这个是ui-bootstrap的库和bootstarap、angularjs

require('../../../../lib/angular-ui/ui-bootstrap-custom-tpls-1.3.2.min');

在模块中注入依赖

angular.module('soc.app.pivot', ['ui.bootstrap']);

在控制器中注入服务：'$uibModal'，和$$uibModalInstance

angular.module('soc.app.pivot').controller('EventController', '$uibModal', function ($uibModal) {

该$uibModal服务只有一个方法：open(options)

https://www.jianshu.com/p/2cbf835509b1

常用属性：animation 显示模态框是否带动画效果

backdrop 弹出模态框时，背景是否置灰，除了true/false外，还可以指定为'static'，即点击背景不能关闭模态框（默认是可以的）,示例：backdrop: false [竖线] 'static'

controller 为模态框指定一个Controller，既可以使用controller的名字，也可以直接指定处理方法，还可以通过array指定依赖的注入，controller内，可通过注入的$uibModalInstance访问模态框的内容

keyboard 按ESC按钮时，是否关闭模态框

templateUrl 模态框的模板链接，与template必须选择一个

resolve 传递到模态窗口中的对象

模态框指定的controller中依赖$uibModalInstance以及传的参数

关闭窗口：

$uibModalInstance.dismiss('cancel');     取消或者关闭后的关闭

$uibModalInstance.close();  成功后的关闭

接收参数：

uibModalInstance.result.then(function (result) {
               console.log(result) //使用此方法接收模态框关闭时传递的参数。
            });

var uibModalInstance=$uibModal.open

var app = angular.module('myApp', ['ui.bootstrap']);
    app.controller('controller', function($scope,$uibModal) {
        $scope.item="123";
        $scope.alert=function(){
           var uibModalInstance = $uibModal.open({
                templateUrl: 'modal.html',
                controller: 'modalController',
                backdrop: 'static',
                keyboard: false,
                resolve: {                  // 将这个controller的数据传递给编辑Modal实例控制器
                    item: function () {
                        return $scope.item;
                    }
                }
            })
        }
    });
    app.controller('modalController',function($scope,$uibModalInstance,item){
        console.log(item);   输出是123
        console.log($scope.item);   输出是undefined
    })