Bootstrap+AngularJS对话框实例

<script type="text/javascript" src="/assets/JS/plugins/jquery.min.js"></script>
<script type="text/javascript" src="/assets/JS/plugins/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/assets/JS/AngularJS/angular.js"></script>
<script type="text/javascript" src="/assets/JS/AngularJS/i18n/angular-locale_zh.js"></script>
<!-- AngularJs+Bootstrap -->
<script src="/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、搞定收工