zoukankan      html  css  js  c++  java
  • $mdDialog和$uibModal弹框关闭传值

    $mdDialog以一个点击button按钮出现弹框为例:

     $scope.btn=function($event,row){

      var dScope = $scope.$new(true);

      dScope.row = row;//从新new一个$scope,把当前值带到弹框中,页面可直接绑定收据,js用前加$scope

      $mdDialog.show({

        scope:dScope,

        parent:angular.element(document.body),

        targetEvent: $event,

        size:'sm',

        clickOutsideToClose:false, //点击弹框外是否关闭弹框

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

        locals:{store:$scope.store}, //这个在弹框的controller里边运用不需要再加$scope,所以不能双向绑定到页面,如果要绑定到页面需要从新赋值

        controller:['$scope',function($scope){

          //.........弹框里边的一些逻辑.............

          比如我里边有个逻辑执行完成后弹框关闭,想要把里边的一个$scope.currentValue值返回到主页面中

          那么执行弹框关闭的方法是$mdDialog.cancel($scope.currentValue),只要把值传过来就行了。在下边then的回调函数function会接收到这个值

        }]

      }).then(function(ret){

        // 这里边是接收$mdDialog.hide()传过来的值

      },function(ret){

        // 这里边是接收$mdDialog.cancel()传过来的值

        比如我的主页面绑定值是$scope.currentVal =  ret;

      });

    };

    $uibModal以一个点击button按钮出现弹框为例:

      $scope.btn=function(oper){

        var dScope = $scope.$new(true);

        dScope.oper = oper;//这个值传到弹框页面可直接绑定数据,js里用前加$scope

        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(){

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

        });

      }

      function btnCtrl($scope,$uibModalInstance){

        //处理弹框里边的逻辑

        关闭弹框用$uibModalInstance.cancel()方法

        弹框页如果想把数据返回给主页面,同样在$uibModalInstance.cancel(‘传值’);接收这个值是在点击按钮出现弹框的函数中,见上面$scope.btn();

      }

  • 相关阅读:
    Linux基础---开关机与帮助
    Linux磁盘管理命令
    批处理之命令补充II
    LeetCode 328. 奇偶链表(Odd Even Linked List)
    LeetCode 岛屿的最大面积(探索字节跳动)
    LeetCode 复原IP地址(探索字节跳动)
    LeetCode 简化路径(探索字节跳动)
    LeetCode 最长公共前缀(探索字节跳动)
    LeetCode 无重复字符的最长子串(探索字节跳动)
    自动机器学习超参数调整(贝叶斯优化)
  • 原文地址:https://www.cnblogs.com/shixy1617/p/8550766.html
Copyright © 2011-2022 走看看