指令不明的，推荐 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="对象"></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可自定义的对话框,弹窗指令的更多相关文章

  1. Taro自定义Modal对话框组件|taro仿微信、android弹窗

    基于Taro多端实践TaroPop:自定义模态框|dialog对话框|msg消息框|Toast提示 taro自定义弹出框支持编译到多端H5/小程序/ReactNative,还可以自定义弹窗类型/弹窗样 ...

  2. Android中制作自定义dialog对话框的实例

    http://www.jb51.net/article/83319.htm   这篇文章主要介绍了Android中制作自定义dialog对话框的实例分享,安卓自带的Dialog显然不够用,因而我们要继 ...

  3. 修改VCL源码实现自定义输入对话框

    来自:https://yq.aliyun.com/wenji/88428 通过修改VCL源码实现自定义输入对话框 在BCB中有两个函数可以实现输入对话框:InputBox和InputQuery,其实I ...

  4. 024 Android 自定义样式对话框(AlertDialog)

    1.AlertDialog介绍 AlertDialog并不需要到布局文件中创建,而是在代码中通过构造器(AlertDialog.Builder)来构造标题.图标和按钮等内容的. 常规使用步骤(具体参见 ...

  5. 《手把手教你》系列技巧篇（二十八）-java+ selenium自动化测试-处理模态对话框弹窗（详解教程）

    1.简介 在前边的文章中窗口句柄切换宏哥介绍了switchTo方法,这篇继续介绍switchTo中关于处理alert弹窗的问题.很多时候,我们进入一个网站,就会弹窗一个alert框,有些我们直接关闭, ...

  6. Vue自定义组件实现v-model指令

    Tips: 本文所描述的Vue均默认是Vue2版本 在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定 那么,什么是双向绑定?通俗 ...

  7. Angular的自定义指令以及实例

    本文章已收录于:  AngularJS知识库  分类: javascript(55)  http://www.cnblogs.com/xiaoxie53/p/5058198.html   前面的文章介 ...

  8. angular directive自定义指令

    先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...

  9. angular指令，异步调用数据，监控数据的变化（自定义一个表头的指令）

    angular框架中提供了很多有效的指令,指令的目的就是为了提高代码的复用率,提高工作效率. 下面我们自己来定义一个指令: 一点建议:写指令名字的时候,尽量不要用用大写,下划线等,否则会有很大的坑等着 ...

随机推荐

  1. 利用poi来向execl中写入对象

    附上jar包下载链接: 附上百度网盘下载连接: 链接:https://pan.baidu.com/s/1t_jXUq3CuhZo9j_UI4URAQ 密码:r2qi package com.wz.po ...

  2. 解题：HEOI 2016 求和

    题面 我们需要知道这样一个东西(大概叫 斯特林公式?) $S(i,j)=\frac{1}{j!}\sum\limits_{k=0}^{j}(-1)^k C_j^k(j-k)^i$ 那么就是推啊 $=\ ...

  3. [NOI2012]美食节——费用流（带权二分图匹配）+动态加边

    题目描述 小M发现,美食节共有n种不同的菜品.每次点餐,每个同学可以选择其中的一个菜品.总共有m个厨师来制作这些菜品.当所有的同学点餐结束后,菜品的制作任务就会分配给每个厨师.然后每个厨师就会同时开始 ...

  4. golang json 编码解码

    json 编码 package main import ( "encoding/json" "fmt" ) type Person struct { Name ...

  5. MySQL搭建环境

    一.MySQL安装 Windows下安装参考网址:https://blog.csdn.net/NepalTrip/article/details/79492058 Ubuntu Linux下安装参考网 ...

  6. python---基础知识回顾（九）图形用户界面-------Tkinter

    前戏:老牌python GUI程序(Tkinter) import tkinter.messagebox as messagebox class Application(Frame): def __i ...

  7. bzoj千题计划111：bzoj1021: [SHOI2008]Debt 循环的债务

    http://www.lydsy.com/JudgeOnline/problem.php?id=1021 如果A收到了B的1张10元,那么A绝对不会把这张10元再给C 因为这样不如B直接给C优 由此可 ...

  8. HDU 1564 简单博弈 水

    n*n棋盘,初始左上角有一个石头,每次放只能在相邻的四个位置之一,不能操作者输. 如果以初始石头编号为1作为后手,那么对于每次先手胜的情况其最后一步的四周的编号必定是奇数,且此时编号为偶数,而对于一个 ...

  9. idea 安装lombok 插件过程

    一.作用 Lombok是一个可以通过简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 Java 代码的工具,bean,entity等类,绝大部分数据类类中都需要get.set.toStrin ...

  10. TED_Topic4：How I fell in love with quasars, blazars and our incredible universe

    By Jedidah Isler # Background about our speaker Jedidah Isler studies blazars(耀变天体) — supermassive h ...