AngularJs模态框应用总结
var modalInstance = $modal.open({
templateUrl: '/static/js/controllers/dashboard/search.html',
controller: 'searchCtrl',
size: 'lg',
resolve: {
formSize: function () {
return {
width: '480px',
height: 'auto'
}
},
mydisplayed: function () {
return $scope.mydisplayed; //返回值给模态框
}
},
scope: scope
});
modalInstance.result.then(function (res) {
$scope.mydisplayed = res;
}); //获取模态框的返回值
在模态框的控制器中定义模态框关闭时，返回给主页面的值：
$modalInstance.close($scope.result); //$scope.result 模态框控制器返回的值。
下面是具体的详情，摘自网络（https://my.oschina.net/codingBingo/blog/715869）：
html页面：
然后在引入自己写的一个控制器文件app.js
重点就是接下的几点了
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
//必须要引入的模块有两个ngAnimate\ui.bootstrap,一个都不能少,必须在这个模板加载的时候引入
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
//然后就是主控制器,没什么,注意$uibModal这个东西,也是要在控制器中引入的
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
//这里很关键,是打开模态框的过程
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,//打开时的动画开关
templateUrl: 'myModalContent.html',//模态框的页面内容,这里的url是可以自己定义的,也就意味着什么都可以写
controller: 'ModalInstanceCtrl',//这是模态框的控制器,是用来控制模态框的
size: size,//模态框的大小尺寸
resolve: {//这是一个入参,这个很重要,它可以把主控制器中的参数传到模态框控制器中
items: function () {//items是一个回调函数
return $scope.items;//这个值会被模态框的控制器获取到
}
}
});
modalInstance.result.then(function (selectedItem) {//这是一个接收模态框返回值的函数
$scope.selected = selectedItem;//模态框的返回值
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;//动画效果
};
});
// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
//这是模态框的控制器,记住$uibModalInstance这个是用来调用函数将模态框内的数据传到外层控制器中的,items则上面所说的入参函数,它可以获取到外层主控制器的参数
$scope.items = items;//这里就可以去外层主控制器的数据了
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
//close函数是在模态框关闭后调用的函数,他会将这个参数传到主控制器的results函数中,作为回调值
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
//dismiss也是在模态框关闭的时候进行调用,而它返回的是一个reason
$uibModalInstance.dismiss('cancel');
};
});
关于modal控制器中的close与dismiss这两个函数,我在网上找了一个详细的说明
意思就是说close呢是用于关闭模态框的方法,返回的是一个result--结果
dismiss也是用于关闭模态框的方法,但返回的是一个reason--理由
这么说应该很好理解了吧,
再说的详细一点就是,,,看代码
modalInstance.result.then(function (selectedItem) {
//dosomething
});
modalInstance.reason.then(function (selecteItem) {
//dosomething
});
var modalInstance = $modal.open({
templateUrl: '/static/js/controllers/dashboard/search.html',
controller: 'searchCtrl',
size: 'lg',
resolve: {
formSize: function () {
return {
width: '480px',
height: 'auto'
}
},
mydisplayed: function () {
return $scope.mydisplayed; //返回值给模态框
}
},
scope: scope
});
modalInstance.result.then(function (res) {
$scope.mydisplayed = res;
}); //获取模态框的返回值
在模态框的控制器中定义模态框关闭时，返回给主页面的值：
$modalInstance.close($scope.result); //$scope.result 模态框控制器返回的值。
下面是具体的详情，摘自网络（https://my.oschina.net/codingBingo/blog/715869）：
html页面：
然后在引入自己写的一个控制器文件app.js
重点就是接下的几点了
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
//必须要引入的模块有两个ngAnimate\ui.bootstrap,一个都不能少,必须在这个模板加载的时候引入
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
//然后就是主控制器,没什么,注意$uibModal这个东西,也是要在控制器中引入的
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
//这里很关键,是打开模态框的过程
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,//打开时的动画开关
templateUrl: 'myModalContent.html',//模态框的页面内容,这里的url是可以自己定义的,也就意味着什么都可以写
controller: 'ModalInstanceCtrl',//这是模态框的控制器,是用来控制模态框的
size: size,//模态框的大小尺寸
resolve: {//这是一个入参,这个很重要,它可以把主控制器中的参数传到模态框控制器中
items: function () {//items是一个回调函数
return $scope.items;//这个值会被模态框的控制器获取到
}
}
});
modalInstance.result.then(function (selectedItem) {//这是一个接收模态框返回值的函数
$scope.selected = selectedItem;//模态框的返回值
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;//动画效果
};
});
// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
//这是模态框的控制器,记住$uibModalInstance这个是用来调用函数将模态框内的数据传到外层控制器中的,items则上面所说的入参函数,它可以获取到外层主控制器的参数
$scope.items = items;//这里就可以去外层主控制器的数据了
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
//close函数是在模态框关闭后调用的函数,他会将这个参数传到主控制器的results函数中,作为回调值
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
//dismiss也是在模态框关闭的时候进行调用,而它返回的是一个reason
$uibModalInstance.dismiss('cancel');
};
});
关于modal控制器中的close与dismiss这两个函数,我在网上找了一个详细的说明
意思就是说close呢是用于关闭模态框的方法,返回的是一个result--结果
dismiss也是用于关闭模态框的方法,但返回的是一个reason--理由
这么说应该很好理解了吧,
再说的详细一点就是,,,看代码
modalInstance.result.then(function (selectedItem) {
//dosomething
});
modalInstance.reason.then(function (selecteItem) {
//dosomething
});