$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();

  }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM