angular可自定义的对话框,弹窗指令

以下为示例代码
<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../dist/lib/angular/angular.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../dist/css/all.min.css" />

    <script type="text/javascript" src="../dist/app.js"></script>

    <title></title>

    <script>

        /**************************************************************************

         *可自定义弹窗指令

         * <dialog load-data="对象"></dialog>

         *传入一个参数对象。以下为参数解释

         * $scope.data={//共三个参数

            isShow: true,//必须 控制显示和隐藏

            template: {//必须 内容模板

                url: webroot+'/views/dialog/warn-dialog.html',//模板地址

                events: function (events) {//对模板进行事件绑定,所有事件和值必须绑定在传入的对象上

                　　　　　　//events:用于绑定事件和值

                }

            },

            buttons: {//必须 buttons:{}空对象表示没有按钮,按钮可0-n个

                key: 'name',//非必须,用于控制按钮显示哪个值

                list: [//非必须,用于自定义按钮,list存在,key必须存在，不存在表示使用默认按钮

                    {//元素内容自定义,用key控制显示

                        name: buttonName,

                        value: 'true'

                    },

                    {

                        name: '取消',

                        value: 'false'

                    }

                ],

                callback: function (item, index) {//使用按钮必须存在,按钮点击的回调事件,item:当前选中的元素,index:元素下标

                    $scope.data.isShow = false;//修改显示隐藏

                    if (item.value) {

                        //window.location.href='login.html';

                    }

                }

            }

           }

         *  <dialogload-data="data"></dialog>

         *

         **************************************************************************/

        app.controller('dialog', ['$scope','webroot', function ($scope,webroot) {

            $scope.content="这是一个传参测试";

            $scope.buttonName='确认';

            $scope.data = {

                isShow: true,

                template: {

                    url: webroot + '/views/dialog/warn-dialog.html',

                    events: function (events) {

                        //因为在当前$scope中定义,所以能够直接访问当前$scope空间

                        events.content = $scope.content;

                        events.back=function(){//因为传递的是值,需要自己进行触发.

                            $scope.backData ='这是一个回传:'+events.content;

                        };

                    }

                },

                buttons: {

                    key: 'name',

                    list: [

                        {

                            name: $scope.buttonName,

                            value: 'true'

                        },

                        {

                            name: '取消',

                            value: 'false'

                        }

                    ],

                    callback: function (item, index) {

                        $scope.data.isShow = false;

                        console.log('这是一个回调事件'+index);

                        console.log(item);

                    }

                }

            };

        }]);

    </script>

</head>

<body ng-controller="dialog">

<dialog load-data="data"></dialog>

<button ng-click="data.isShow=!data.isShow">点击按钮测试</button>

{{backData}}

<script type="text/javascript" src="../dist/directive/dialogBox.js"></script>

</body>

</html>
实例github可以下载
样式文件，根据自己需求自行修改。
巴特西

angular可自定义的对话框,弹窗指令

最新文章

热门文章
