指令不明的，推荐 AngularJS指令参数详解
以下为示例代码
<!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可以下载
样式文件，根据自己需求自行修改。