Angular 下的 directive （part 2）
ngCloak
ngCloak指令被使用在，阻止angular模板从浏览器加载的时候出现闪烁的时候。使用它可以避免闪烁问题的出现。 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}为达到最佳的效果 angular脚本必须加载html文档的头部部分;或者上面的css规则必须包含在应用程序的外部样式表。
ngController
ngController会添加一个 controller类到view里面,这是angular支持模型-视图-控制器设计模式背后的原则的一个关键。Directive Info
Usage
as attribute:
<ANY
ng-controller="">
...
</ANY> Arguments
| Param | Type | Details |
|---|---|---|
| ngController | expression |
$controllerProvider或者表达式注册构造函数名字，对当前范围评估一个构造函数。
如果当前$controllerProvider配置为使用全局变量(via
$controllerProvider.allowGlobals()),就可以以全局名去访问构造函数（不被推荐） |
ngCsp
ngClick
Directive Info
Usage
<ANY
ng-click="">
...
</ANY> Arguments
| Param | Type | Details |
|---|---|---|
| ngClick | expression |
Expression to evaluate upon click.(事件对象可以用 $event) |
ngDblclick
The ngDblclick 指令允许您指定自定义行为，用于元素的双击行为。
Usage
<ANY
ng-dblclick="">
...
</ANY>/////////////////////////////////////////////////////////////////////<button ng-dblclick="count = count + 1" ng-init="count=0">
Increment (on double click)
</button>
count: {{count}}ngMousedown，
ngMouseup，
ngMouseover，
ngMouseenter，
ngMouseleave，
ngMousemove，
ngKeydown：
<input ng-keydown="count = count + 1" ng-init="count=0">
key down count: {{count}}ngKeyup：
<p>Typing in the input box below updates the key count</p>
<input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}
<p>Typing in the input box below updates the keycode</p>
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>ngKeypress：
<input ng-keypress="count = count + 1" ng-init="count=0">
key press count: {{count}}
以上这些的用法都差不多，就是事件形式不一样而已。
ngSubmit：
data-action, or x-action属性。去看下指令文档，那里详细讨论了何时ngSubmit可能被触发。 警告：通过使用ngClick和ngSubmit一起处理程序。小心不要造成“double-submission”【连续提交】 <script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
ngFocus
ngBlur
ngCopy
Directive Info
<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">
copied: {{copied}} ngCup
<input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">
cut: {{cut}}ngIf
:first-child or :last-child 伪类 ngInclude
ngNonBindable
<div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div>ngPluralize
<script>
angular.module('pluralizeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.person1 = 'Igor';
$scope.person2 = 'Misko';
$scope.personCount = 1;
}]);
</script>
<div ng-controller="ExampleController">
Person 1:<input type="text" ng-model="person1" value="Igor" /><br/>
Person 2:<input type="text" ng-model="person2" value="Misko" /><br/>
Number of People:<input type="text" ng-model="personCount" value="1" /><br/>
<!--- Example with simple pluralization rules for en locale --->
Without Offset:
<ng-pluralize count="personCount"
when="{'0': 'Nobody is viewing.',
'one': '1 person is viewing.',
'other': '{} people are viewing.'}">
</ng-pluralize><br>
<!--- Example with offset --->
With Offset(2):
<ng-pluralize count="personCount" offset=2
when="{'0': 'Nobody is viewing.',
'1': '{{person1}} is viewing.',
'2': '{{person1}} and {{person2}} are viewing.',
'one': '{{person1}}, {{person2}} and one other person are viewing.',
'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
</ng-pluralize>
</div> ngRepeat
ngRepeat 从一个集合中一次指令实例化一个模板，每个实例模板都拥有一个自己的作用域（$scope）。在当前的集合中循环出一个变量。用$index来设置索引或者一个Key.| Variable | Type | Details |
|---|---|---|
$index |
number | 遍历变量 |
$first |
boolean | 迭代器遍历出来的第一个 |
$middle |
boolean | 迭代器出来在第一个与最后一个中间的 |
$last |
boolean | 迭代出来的最后一个 |
$even |
boolean | 遍历出来的偶数 |
$odd |
boolean | 遍历出来的基数 |
ngSwitch
<div ng-controller="ExampleController">
<select ng-model="selection" ng-options="item for item in items">
</select>
<tt>selection={{selection}}</tt>
<hr/>
<div class="animate-switch-container"
ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
</div>
</div> $scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
}]);ngTransclude
<script>
angular.module('transcludeExample', [])
.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div >' +
'<div >{{title}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller('ExampleController', ['$scope', function($scope) {
$scope.title = 'Lorem Ipsum';
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
</script>
<div ng-controller="ExampleController">
<input ng-model="title"><br>
<textarea ng-model="text"></textarea> <br/>
<pane title="{{title}}">{{text}}</pane>
</div>script
templateUrl使用。<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
<a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
<div id="tpl-content" ng-include src="currentTpl"></div>Angular 下的 directive （part 2）的更多相关文章
- Angular 下的 directive （part 1）
directive 指令 Directive components 指令部分 使用指令自动引导一个AngularJS应用.ngApp指令指定应用程序的根元素,通常是放在页面的根元素如: < ...
- angular下H5上传图片（可多张上传）
最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-f ...
- angular Creating a Directive that Adds Event Listeners
<span my-draggable>Drag ME</span> angular.module('dragModule', []) .directive('myDraggab ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- angular插件制作——Directive指令使用详解
1.replace——最简单的使用方法,直接将自定义标签替换为模板内的内容: html: <!DOCTYPE html> <html> <head> <me ...
- Angular 下的 function
angular.lowercas 将指定的字符串转换为小写的 Usage(使用方法) angular.lowercase(string); Arguments Param Type Details ...
- angular之自定义 directive
1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.direc ...
随机推荐
- Kaggle入门(一)——Digit Recognizer
目录 0 前言 1 简介 2 数据准备 2.1 导入数据 2.2 检查空值 2.3 正则化 Normalization 2.4 更改数据维度 Reshape 2.5 标签编码 2.6 分割交叉验证集 ...
- HyperLedger Fabric 学习思路分享
HyperLedger Fabric 学习思路分享 HyperLedger Fabric最初是由Digital Asset和IBM公司贡献的.由Linux基金会主办的一个超级账本项目,它是一个目前非常 ...
- PAT甲题题解-1103. Integer Factorization (30)-（dfs）
该题还不错~. 题意:给定N.K.P,使得可以分解成N = n1^P + … nk^P的形式,如果可以,输出sum(ni)最大的划分,如果sum一样,输出序列较大的那个.否则输出Impossible. ...
- 在CentOS上搭建PHP服务器环境(可用)
原文:https://www.cnblogs.com/zy2009/p/7047828.html 1,先安装apache: yum install httpd 配置ServerName vi /etc ...
- Linux内核分析作业 NO.2
操作系统是如何工作的 于佳心 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ...
- 20190215面试-C#操作外设-多线程-shocket
百度了下,ic卡读卡器 文章;C# 读IC卡程序这个文章还不错. 从北京金木雨电子有限公司下载了,兼容IC卡 身份证阅读器的SDK资料,里面有介绍如何连接ic读卡器,对卡进行一些操作. MasterR ...
- Alpha冲刺第5天
Alpha第六天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...
- 常用的cpl 命令 运行直接打开控制台的简单方法
转载百度百科 工作中处理 windows机器 有时候 打开 网路修改ip地址特别繁琐,所以找了下 快速打开一些简单的控制台 能提高工作效率. (Control Panel extension) ...
- delphi制作登陆窗体
delphi登陆窗体的制作,就我知道的,可以有两种方法,一种是在工程文件中实现登陆窗体的动态调用,另一种就是在主窗体的OnCreate事件中动态创建登陆窗体,两种方法都需要将主窗体设置为Auto-cr ...
- BZOJ 3516 国王奇遇记加强版(乱推)
题意 求\(\sum_{k=1}^{n}k^mm^k (n\leq1e9,m\leq1e3)\) 思路 在<>中有一个方法用来求和,称为摄动法. 我们考虑用摄动法来求这个和式,看能不能得到 ...