AngularJS 弹出框 $modal

AngularJS 中的弹出框使用指南

最新推荐文章于 2021-01-26 15:13:45 发布

luluan_lin

最新推荐文章于 2021-01-26 15:13:45 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/luluan_lin/article/details/90476689

前端专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何在 AngularJS 应用中使用 $modal 服务创建弹出框。通过 $modal.open() 初始化弹出框，并在模态框关闭后利用 $modalInstance.result.then() 执行相关回调函数。同时，可以使用 $modalInstance.close() 或 $modalInstance.dismiss() 来关闭模态框，分别带有不同的行为。

$modal.open(

templateUrl：模态窗口的地址
template：用于显示html
scope：一个作用域为模态的内容使用
controller：为$modal指定的控制器，该控制器可用$modalInstance注入
resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()
backdrop：控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭
keyboard：当按下Esc时，模态对话框是否关闭，默认为ture
windowClass：指定一个class并被添加到模态窗口中

)
$modalInstance.result.then(function(){
模态框关闭后调用该函数
})

$modalInstance.close()关闭并传递一个结果
$modalInstance.dismiss()关闭并不执行其他操作

// 该controller需要注入$modal
modalInstance = $modal.open(
      templateUrl: 'test.html'
      controller: 'testCtrl'
      resolve:
        modalData: ->
          row: row
    ).result.then (data) ->
      // 模态框关闭执行函数

// 该controller需要注入$modalInstance
vm.hideModal = ->
	vm.row = angular.copy modalData.row
	$modalInstance.dismiss()
// 模态框关闭后将allPicture返回并交由$modalInstance.result.then处理
$modalInstance.close { allPicture: vm.allPicture }