首页 > 代码库 > angular可自定义的对话框,弹窗指令

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

指令不明的,推荐 AngularJS指令参数详解

github地址

以下为示例代码

<!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="http://www.mamicode.com/对象"></dialog>
         *传入一个参数对象。以下为参数解释
         * $scope.data=http://www.mamicode.com/{//共三个参数"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可自定义的对话框,弹窗指令