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

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

2024-08-22 15:48:52   221人阅读

指令不明的，推荐 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可自定义的对话框,弹窗指令


联系
我们