angular-ui-bootstrap-modal必须要说的几个点
2017-04-19 17:27
375 查看
项目中以前就经常用到模态框,但是一直没有时间来整理,
好在今天稍微有点时间,就来讲一下angular-ui-bootstrap-modal这个功能要怎么来做,以及其中不得不提的几个点
首先还是最基础的类库引入,官方网站是提了一下版本的
https://angular-ui.github.io/bootstrap/这里给个网址可以自己看一下
然后在其中版本依赖就说了这么几个点
angular的版本要在1.4.x以上,1.5.5版本还在测试中,然后ui-bootstrap-tpls.js这个类库是在0.14.3以上,然后其他的组件要求都是在1.5.5一下就可以了
因为现在官方最新的angular版本好像是1.5.7,注意一下这个点就可以了,其他的问题应该都不大,
该怎么引入还是怎么引入
那么接下来直接看我的引入版本吧
这是我用的类库版本,当然如果你不能翻墙的话,最好还是把这些类库down下来,直接用bower就可以了
这里提一下,ui-bootstrap-tpls.js这个类库是在angular-bootstrap这个包里面的,然后就是版本注意一下,就不会有问题了,
ok,文件引入做好了,接下来就是做一个modal
首先还是html
意思就是说close呢是用于关闭模态框的方法,返回的是一个result--结果
dismiss也是用于关闭模态框的方法,但返回的是一个reason--理由
这么说应该很好理解了吧,
再说的详细一点就是,,,看代码
modalInstance.result.then(function (selectedItem) {
//dosomething
});
modalInstance.reason.then(function (selecteItem) {
//dosomething
});
好在今天稍微有点时间,就来讲一下angular-ui-bootstrap-modal这个功能要怎么来做,以及其中不得不提的几个点
首先还是最基础的类库引入,官方网站是提了一下版本的
https://angular-ui.github.io/bootstrap/这里给个网址可以自己看一下
然后在其中版本依赖就说了这么几个点
angular的版本要在1.4.x以上,1.5.5版本还在测试中,然后ui-bootstrap-tpls.js这个类库是在0.14.3以上,然后其他的组件要求都是在1.5.5一下就可以了
因为现在官方最新的angular版本好像是1.5.7,注意一下这个点就可以了,其他的问题应该都不大,
该怎么引入还是怎么引入
那么接下来直接看我的引入版本吧
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
这是我用的类库版本,当然如果你不能翻墙的话,最好还是把这些类库down下来,直接用bower就可以了
bower install angular --save bower install angular-bootstrap -save bower install angular-animate -save bower install bootstrap --save
这里提一下,ui-bootstrap-tpls.js这个类库是在angular-bootstrap这个包里面的,然后就是版本注意一下,就不会有问题了,
ok,文件引入做好了,接下来就是做一个modal
首先还是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
});
这样总好理解了吧,哈哈,就是这样啦
https://my.oschina.net/codingBingo/blog/715869
相关文章推荐
- 浅谈angular-ui-bootstrap-modal这个骚东西
- angular-ui-bootstrap $modal 弹窗拖动 自动高度
- Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog
- Angular UI ngx-bootstrap 使用说明
- AngularJS ui.bootstrap.pagination 分页
- Angular 中修改bootstrap的模态框(modal)大小
- AngularJS ui.bootstrap.alert 消息
- 前端ers 必须知道的几个bootstrap cdn加速节点
- AngularJS ui.bootstrap.tabs
- AngularJS ui.bootstrap.alert 消息
- jquery-ui实现bootstrap的modal拖拽功能,弹窗头部拖拽
- bootstrap2 升级到bootstrap3 分页pagination 与Angular UI 不兼容
- angularjs ui.bootstrap.pagination分页简单使用
- Bootstrap form 表单 必须加上 使用类名“form-horizontal”主要有以下几个作用
- angular Tabs (ui.bootstrap.tabs)
- AngularJS+ui.bootstrap实现图片轮播
- jQueryUI modal dialog does not show close button (x) JQueryUI和BootStrap混用时候,右上角关闭按钮显示不出图标的解决办法
- angular-ui-bootstrap (1)
- AngularUI之Modal
- angular-ui-bootstrap 日历控件国际化