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