首页 > 代码库 > Bootstrap+AngularJS对话框实例

Bootstrap+AngularJS对话框实例

<script type="text/javascript" src="http://www.mamicode.com/assets/JS/plugins/jquery.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/assets/JS/plugins/jquery-migrate.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/assets/JS/AngularJS/angular.js"></script><script type="text/javascript" src="http://www.mamicode.com/assets/JS/AngularJS/i18n/angular-locale_zh.js"></script><!-- AngularJs+Bootstrap --><script src="http://www.mamicode.com/Assets/JS/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js"></script>

1、加入jquery和angular的引用

2、加入ui-bootstrap-tpls.min.js,这个是bootstrap对angularjs的封装

3、编写对话框模板

<script type="text/ng-template" id="Service.html">           <div class="portlet box blue ">            <div class="portlet-title">                <div class="caption">                    <i class="fa fa-gift"></i>服务协议                </div>            </div>            <div class="portlet-body">                <div class="scroll-body" slimscroll="{height : 500}" style=‘height:500px;‘>                    <strong style=‘text-align:center‘>服务协议</strong><br />                </div>                <ul class="pager">                    <li class="previous">                        <a href="javascript:;" class="btn blue"  ng-click=‘Refuse()‘>                            <i class="fa fa-angle-left"></i>拒绝 </a>                    </li>                    <li class="next">                        <a href="javascript:;" class="btn blue" ng-click=‘Agree()‘>同意 <i class="fa fa-angle-right"></i>                        </a>                    </li>                </ul>            </div>        </div>        </script>

5、添加ng-click事件,如: <a href="javascript:;" ng-click="OpenDlg(‘lg‘)">《服务协议》</a> 

6、当然不要忘记了这个: var app = angular.module(‘appMain‘, [‘ui.bootstrap‘]);

7、在控制器中处理打开对话框的点击事件

$scope.OpenDlg=function(size){                var size=size||‘‘;//size是一个窗口大小的参数,可采用lg,sm,默认值空白,以此来控制窗口大小                var modalInstance = $modal.open({                      templateUrl: ‘Service.html‘, //模板url                     controller: ‘ctrlDlgService‘, //控制器                    size : size,//默认窗口大小                    resolve: {  //参数传递                        Agree : function() {                            return [true, false]                        }                    }                  });                 modalInstance.opened.then(function(){                    console.log(‘modal is opened‘);  //模态窗口打开之后执行的函数                  });                  modalInstance.result.then(function (result) {                      $scope.selected = result;//窗口点击关闭后的返回值                    console.log(‘result:‘+result);                  }, function (reason) {                      console.log(reason);//点击空白区域,总会输出backdrop click,点击取消,则会触发cancel                      $log.info(‘Modal dismissed at: ‘ + new Date());                  });             }

8、对话框控制器

app.controller(‘ctrlDlgService‘, function ($scope, $http,$modal,growl,$modalInstance,Agree){            $scope.items = Agree;//获取参数            // 拒绝事件            $scope.Refuse = function() {                console.log(‘Refuse‘);                $modalInstance.close(false);            };            //同意事件            $scope.Agree = function() {                console.log(‘Agree‘);                $modalInstance.close(true);            };            //退出事件            $scope.cancel = function() {                $modalInstance.dismiss(‘cancel‘);            }        })

9、搞定收工

Bootstrap+AngularJS对话框实例