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 ...
随机推荐
- Unity光照与渲染设置学习笔记
学习了一下unity中有关光照和渲染的一些设置,现在才明白之前遇到的一些问题只是没有正确设置而已. unity不同版本的光照设置会有一些差异,而且可以调节的参数非常多,这里只记录一些重要的参数和使用方 ...
- python 游戏(猜单词Hangman)
1.游戏思路和流程图 实现功能:随机一个单词让玩家猜测(后续难度实现修改为成语填空,成语必须要有提示,可修改猜的次数,增加连续猜成语,难度系数随着次数的增加而增加) 游戏流程图 2. 单词库和模块 i ...
- 20135202闫佳歆--week3 跟踪分析Linux内核的启动过程--实验及总结
实验三:跟踪分析Linux内核的启动过程 一.调试步骤如下: 使用gdb跟踪调试内核 qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd r ...
- 常用校验码（奇偶校验码、海明校验码、CRC校验码）
一.奇偶校验码 二.海明校验码 三.CRC校验码 计算机系统运行时,各个部之间要进行数据交换.交换的过程中,会有发生误码的可能(即0变成1或1变成0),由于计算机的储存是通过二进制代码来实现的的, ...
- 重温servlet②
重定向:我给服务器请求一条消息,服务器让我访问另外一个服务器(新的地址).302状态码,并设置location头,完成重定向.两个请求. package com.pcx.servlets; imp ...
- 使用git进行代码的推送
首先是对于锐捷墙的问题,登陆github有时可以有时又连不上,网络又非常慢,所以用了十足的耐心才fork完了代码库.链接https://github.com/niconiconiconi/hellow ...
- 数学口袋精灵app（小学生四则运算app）开发需求
数学口袋精灵APP,摒除了传统乏味无趣学习数学四则运算的模式,采用游戏的形式,让小朋友在游戏中学习,培养了小朋友对数学的兴趣,让小朋友在游戏中运算能力得到充分提升.快乐学习,成长没烦恼! 项目名字:“ ...
- 开源中文分词框架分词效果对比smartcn与IKanalyzer
一.引言: 中文分词一直是自然语言处理的一个痛处,早在08年的时候,就曾经有项目涉及到相关的应用(Lunce构建全文搜索引擎),那时的痛,没想到5年后的今天依然存在,切分效果.扩展支持.业务应用等方面 ...
- ci test
下载ci 版本 3.1.9 下载地址 https://www.codeigniter.com/ 怎么查看CI的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?system\core\cod ...
- MYSQL 解决中文字符集乱码问题的方法
修改 /etc/mysql/my.cnf 增加内容 [client] default-character-set = utf8mb4 [mysql] default-character-set = u ...