angular可自定義的對話框,彈窗指令

時間 2019-11-10

原文原文鏈接

如下爲示例代碼html

<!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>