angularjs 自定义指令弹窗
(function() {
'use strict'; angular.module('frontierApp')
.directive('confirmPopup', ['$timeout', ConfirmPopupDirective])
.directive('messageTips', ['$timeout', '$rootScope', MessageTipsDirective]); function ConfirmPopupDirective($timeout) {
var directive = {
restrict: 'A',
scope: {
confirmPopup: '&',
confirmTitle: '=',
confirmContent: '=',
},
link: link,
transclude: true,
template: '<div class="trans-clude" ng-transclude ng-click="show()"></div>' +
'<div class="modal fade confirm-modal">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<span class="close ES3iconfont ES3icon-icon-closs" ng-click="close()"></span>' +
'<h4 class="modal-title" ng-bind="confirmTitle"></h4>' +
'</div>' +
'<div class="modal-body"><i class="iconfont icon-warning"></i>' +
'<p ng-bind="confirmContent"></p>' +
'</div>' +
'<div class="modal-footer">' +
'<button class="button-cancel" ng-click="close()">取消</button>' +
'<button class="button-confirm" ng-click="confirm()">确定</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
}; return directive; function link(scope, element, attrs) { scope.show = function() {
element.find('.modal').modal();
}; scope.close = function() {
element.find('.modal').modal('hide');
}; scope.confirm = function() {
element.find('.modal').modal('hide');
$timeout(function() {
scope.confirmPopup();
}, 500);
};
}
} function MessageTipsDirective($timeout, $rootScope) { var directive = {
restrict: 'EA',
link: link,
replace: true,
template: '<div class="message-tips"></div>'
}; return directive; function link(scope, element, attrs) { //level: success,error
$rootScope.showMessage = function(title,message, level, delay) {
var tip = angular.element('<div class="alert message-tip" >\
<div class="message-tip-header">'+title+'\
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span></button>\
</div><div class="message-tip-body"><i class="iconfont icon-'+level+' iconSuccess"></i>' + message + '</div></div>').appendTo(element);
tip.addClass('alert-' + level); if (delay) {
$timeout(function() {
tip.alert('close');
}, delay * 1000);
} element[0].addEventListener('click',function(e){
if(e.target.nodeName === 'BUTTON'){
if(message == '请选择要恢复的数据源'){
// location =
}
}
}) };
}
} angular.element('body').append('<div message-tips></div>');
})();
angularjs 自定义指令弹窗的更多相关文章
- AngularJs自定义指令详解(1) - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- AngularJs自定义指令详解(6) - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- angularJs自定义指令.directive==类似自定义标签
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
- angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
- AngularJS自定义指令(Directives)在IE8下的一个坑
在项目中,由于要兼容到IE8,我使用1.2.8版本的angularJS.这个版本是支持自定义指令的.我打算使用自定义指令将顶部的header从其他页面分离.也就是实现在需要header的页面只用在&l ...
随机推荐
- php的FTP操作类
class_ftp.php <?php /** * 作用:FTP操作类( 拷贝.移动.删除文件/创建目录 ) */ class class_ftp { public $off; // 返回操作状 ...
- 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
- Data Lake Analytics IP白名单设置攻略
当我们成功开通了 DLA 服务之后,第一个最想要做的事情就是登录 DLA 数据库.而登录数据库就需要一个连接串.下面这个页面是我们首次开通 DLA 之后的界面,在这里我们要创建一个服务访问点. 在上面 ...
- PHP--y2k38的解决方法已经时间格式的常用转换
y2k38又名千年虫问题,又称Uinx Millennium Bug,此漏洞将会影响到所有32位系统下用Unix时间戳整数来记录时间的PHP,及其它编程语言. 一个整型的变量所能保存的最大时间为203 ...
- jstree设置checkbox单选
jstree设置插件checkbox只允许单选 jstree version console.log($.jstree.version); 3.3.8 单选配置参数: $.jstree.default ...
- SpringBoot web获取请求数据【转】
SpringBoot web获取请求数据 一个网站最基本的功能就是匹配请求,获取请求数据,处理请求(业务处理),请求响应,我们今天来看SpringBoot中怎么获取请求数据. 文章包含的内容如下: 获 ...
- .net WebServer示例及调用(接口WSDL动态调用 JAVA)
新建.asmx页面 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- Direct12优化
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- Direct12优化 第一章:向量代数 1.向量计算的时候,使用XMV ...
- 总结 ESP8266 RTOS 开发环境搭建
总结 ESP8266 RTOS 开发环境搭建 仔细看官方文档. 必须一步一步操作. 不要想当然,以为 make 就可以. 忽略编译警告,除非是错误. 工具链必须使用官方提供的. 多看看 Issues ...
- 通过反射 往泛型Integer的集合里添加String 类型的数据 Day25
package com.sxt.method1; import java.lang.reflect.Method; /* * 需求:通过反射 往泛型Integer的集合里添加String 类型的数据 ...