首页 > 代码库 > 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可自定义的对话框,弹窗指令
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。