angular 全局常用指令
1.全局支持 enter快捷键触发事件
// 全局指令
app.directive('ngEnter', ['$window',"$timeout", ($window,$timeout) => {
return {
restrict: 'A',
link ($scope, element, attrs) {
element.bind('keypress', (ev) => {
ev = ev || $window.event;
if (event.keyCode === 13) {
$timeout(function () {
$scope.$eval(attrs.ngEnter);
});
//引入$timeout 解决渲染问题
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
return false;
}
$window.event ? ev.cancelBubble=true : ev.stopPropagation();//清除冒泡
});
element.on('$destroy', function () {
element.unbind('keypress');
$scope.$destroy();
});
}
};
}]);
2.点击按钮之后禁用按钮,防止多重提交
app.directive('clickAndDisable', function() {
return {
scope: {
clickAndDisable: '&'
},
link: function(scope,element, iAttrs) {
element.bind('click', function() {
element.prop('disabled',true);
scope.clickAndDisable().finally(function() {
element.prop('disabled',false);
})
});
}
};
});
3.判断 ng-repeat 渲染完成后操作
app.directive('repeatFinish',function(){
return {
link: function(scope,element,attr){
if(scope.$last == true){
console.log("ng-repeat遍历完成");
scope.$eval( attr.repeatFinish )
}
}
}
});
angular 全局常用指令的更多相关文章
- Angular JS - 7 - Angular JS 常用指令2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Angular JS - 6 - Angular JS 常用指令
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- angular/cli 常用指令
1.安装@angular/cli npm install -g @angular/cli 2.更新@angular/cli npm uninstall -g @angular/cli npm cach ...
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- nvm配置及常用指令、配置全局node_global
1.nvm-windows下载 nvm下载链接点击最新版本nvm-setup.zip下载安装即可. 2.配置nvm环境变量(安装nvm会默认配置,可忽略) 环境变量打开方式:右键此电脑 > 属性 ...
- Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- vue.js介绍,常用指令,事件,以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
随机推荐
- Leetcode703.Kth Largest Element in a Stream数据流中的第K大元素
设计一个找到数据流中第K大元素的类(class).注意是排序后的第K大元素,不是第K个不同的元素. 你的 KthLargest 类需要一个同时接收整数 k 和整数数组nums 的构造器,它包含数据流中 ...
- vue-cli3 关闭eslint
关闭eslint 直接注释掉package.json文件中eslint的配置就可以了(以下是vue-cli的默认配置) "eslintConfig": { "root&q ...
- TP5动态路由配置好了但是报错was not found on this server的原因以及解决方法
问题:The requested URL /xxxx.html was not found on this server 原因:apache的重写未开启,开启重写后,问题解决, 方法如下: apach ...
- 基于jQuery,bootstrap的bootstrapValidator的学习(一)
bootstrap:能够增加兼容性的强大框架. 因为移动端项目需要数据验证,就开始学习了bootstrapValidator . 1.需要引用的文件: css: bootstrap.min.css b ...
- Thread class vs Runnnable interface(转)
http://developer.51cto.com/art/201203/321042.htm Thread(Runnable target) Allocates a new Thread obje ...
- CSS user-select文本是否可复制
1. 概述 1.1 说明 在项目过程中,有时候需要网页中内容信息不可被复制进行保护数据信息,故可使用css属性user-select进行控制用户能否选中文本. 1.2 语法 user-select : ...
- Directx11教程(3) 一个最基本D3D应用程序(1)
原文:Directx11教程(3) 一个最基本D3D应用程序(1) 在前一篇教程程序代码的基础上,这次我们将增加2个类: InputClass,键盘处理的代码将放在这个类里面,Graphi ...
- Mysql里查询字段为Json格式的数据模糊查询以及分页方法
public void datagrid(CustomFormEntity customForm,HttpServletRequest request, HttpServletResponse res ...
- day39-Spring 03-JDK的动态代理
package cn.itcast.spring3; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Meth ...
- “龙井”开箱评测 |Alibaba Dragonwell 新手上路指南
作者|阿里云智能事业群 高级技术专家 陆传胜 阿里巴巴有着最丰富的 Java 应用场景,覆盖电商,金融,物流等众多领域,是世界上最大的 Java 用户之一. 2019 年 3 月 21 日,阿里巴巴在 ...