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页面：
<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>
然后在引入自己写的一个控制器文件app.js
<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', 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页面：
<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>
然后在引入自己写的一个控制器文件app.js
<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', 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
});