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
重点就是接下的几点了
关于modal控制器中的close与dismiss这两个函数,我在网上找了一个详细的说明
意思就是说close呢是用于关闭模态框的方法,返回的是一个result--结果
dismiss也是用于关闭模态框的方法,但返回的是一个reason--理由
这么说应该很好理解了吧,
再说的详细一点就是,看代码
<div ng-controller="ModalDemoCtrl"> <!-- 这里就是控制器的内容,然后直接在控制器里面插入modal的页面元素--> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <div class="modal-body"> <ul> <li ng-repeat="item in items"> <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> </div> </script> <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> <div ng-show="selected">Selection from a modal: {{ selected }}</div> </div><script src="app.js"></script>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',$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');
};
});modalInstance.result.then(function (selectedItem) {
//dosomething
});
modalInstance.reason.then(function (selecteItem) {
//dosomething
});
原文链接:https://www.f2er.com/angularjs/148226.html