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 ...
随机推荐
- 一种C#泛型方法在lua中表示的设计
在进行lua方法注册的时候, 大多数解决方案直接否定了泛型方法, 因为在lua侧难以表达出泛型, 以及lua的函数重载问题, 函数重载问题可以通过一些特殊方法解决, 而泛型问题是主要问题, 以Unit ...
- ejs 模板使用方法
http://embeddedjs.com/ Embedded JS Templates Embedded JS(EJS) 来源于ERB模板,且与ERB有很多相似之处.它有着与ERB相同的Tag,且包 ...
- 《Linux内核分析》第三周
[李行之原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...
- OpenState之 Mac学习 实验
OpenState之 Mac学习 实验 目录 OpenState安装 Port Knocking 实验 Mac Learning 实验 环境要求: 系统ubuntu 14.04 mininet:2.3 ...
- Spring+Junit测试用例的使用
1.[导包]使用Spring测试套件,需要两个jar包:junit-X.X.jar和spring-test-X.X.X.RELEASE.jar,在maven项目下可添加如下依赖: <depend ...
- CentOS下搭建Hadoop
目录 安装配置jdk 安装Hadoop 下载解压 配置文件 启动hadoop 格式化HDFS 停止hdfs和yarn 参考:Hadoop官网文档 版本:hadoop-3.2.0 安装配置jdk 因ha ...
- Jenkins发送邮件中文乱码问题解决
在环境变量中添加: JAVA_TOOL_OPTIONS = -Dfile.encoding=UTF8 配置好后,重启Jenkins即可
- 【HTML5】中的一些新标签
1.element.classList 获取该元素的所有类名,并以数组方式列出. 增加类名:element.classList.add(class1,class2); //可添加一个或多个. 去除类名 ...
- poj2135 Farm Tour（费用流）
Description When FJ's friends visit him on the farm, he likes to show them around. His farm comprise ...
- 【题解】 [ZJOI2006]书架 （Splay）
懒得复制,戳我戳我 Solution: 还是一个\(Splay\),我们只用多存一个值\(rad\)来维护二叉树,然后用数组存下每个书对应的值是多少 \(Top\)操作,我是把\(s\)旋转到根节点, ...