AngularJS $uibModal关闭传值和多层弹窗关闭问题

1.关闭传值示例:

// 通过声明变量操作

var modalInstance = $uibModal.open({

      scope:dScope,

      animation: true,

      templateUrl:'弹框页面所在路径',

      controller: 'btnCtrl',   //弹框的controller

      size:'lg'  //控制弹框大小 /sm

    });

    //弹框关闭时的方法

    if(modalInstance.result){

      modalInstance.result.then(function(‘传值’){

        //隐藏弹框的业务逻辑

        console.log('传值');

      },function('传值'){

        //关闭弹框的业务逻辑

        console.log('传值');

      });

    }

    //弹框打开之后执行的函数

    modalInstance.opened.then(function(){

      //模态窗口打开之后执行的函数

    });

 

2.多层弹窗关闭:

将弹窗内容提到单独html,并定义controller与之对应,

ui-bootstrap-tpls.js部分源码:

'modal-instance': '$uibModalInstance',
close: '$close($value)',
dismiss: '$dismiss($value)'

实例为:$uibModalInstance

有colse和dismiss方法,无cancle方法

 

更多内容参考:https://www.cnblogs.com/shixy1617/p/8550766.html和底部相关评论

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue3中实现多层弹窗的嵌套可以通过以下步骤实现: 1.在父组件中定义一个状态变量来控制弹窗的显示与隐藏。 2.在父组件中通过v-if指令来控制弹窗的显示与隐藏,同时通过v-bind指令将状态变量传递给子组件。 3.在子组件中定义一个状态变量来控制弹窗的显示与隐藏,同时通过props接收父组件传递的状态变量。 4.在子组件中通过v-if指令来控制弹窗的显示与隐藏,同时通过v-bind指令将状态变量传递给子组件的子组件。 5.重复以上步骤即可实现多层弹窗的嵌套。 示例代码如下: // 父组件 <template> <div> <button @click="showModal = true">打开弹窗</button> <modal :show="showModal" @close="showModal = false"> <h2>这是一个弹窗</h2> <button @click="showSubModal = true">打开子弹窗</button> <sub-modal :show="showSubModal" @close="showSubModal = false"> <h2>这是一个子弹窗</h2> </sub-modal> </modal> </div> </template> <script> import Modal from './Modal.vue' import SubModal from './SubModal.vue' export default { components: { Modal, SubModal }, data() { return { showModal: false, showSubModal: false } } } </script> // modal组件 <template> <div v-if="show" class="modal"> <div class="modal-content"> <slot></slot> <button @click="$emit('close')">关闭弹窗</button> </div> </div> </template> <script> export default { props: { show: { type: Boolean, default: false } } } </script> // sub-modal组件 <template> <div v-if="show" class="modal"> <div class="modal-content"> <slot></slot> <button @click="$emit('close')">关闭弹窗</button> </div> </div> </template> <script> export default { props: { show: { type: Boolean, default: false } } } </script>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值