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 ...
随机推荐
- Jenkins 构建运行java程序
我们将在Jenkins建立执行一个简单的 HelloWorld 应用程序,构建和运行Java程序.打开网址:http://localhost:8080/jenkins 第1步- 转到Jenkins 仪 ...
- 20135323符运锦----第三周：构建一个简单的Linux系统MenuOS
相关知识点 1.arch目录 占据相当庞大的空间,X86目录下代码需要重点关注. 2.init目录 内核启动的相关代码基本都在此目录下,内含MAIN.C,文件中START_KERNEL是整个LINUX ...
- Office处理
1.NPOI:一个开源项目,不需要安装Microsoft Office,支持对Office 97-2003,2007文件格式,功能比较强大. http://npoi.codeplex.com/ 2.a ...
- Access restriction: The type 'BASE64Decoder' is not API
Access restriction: The type 'BASE64Decoder' is not API (restriction on required library 'C:\Program ...
- SpringBoot(十四)_springboot使用内置定时任务Scheduled的使用（一）
为什么使用定时? 日常工作中,经常会用到定时任务,比如各种统计,并不要求实时性.此时可以通过提前设置定时任务先把数据跑出来,后续处理起来更方便. 本篇文章主要介绍 springboot内置定时任务. ...
- IDEA 调试技巧
转载:http://blog.csdn.net/victor_cindy1/article/details/52336983 1.这里以一个web工程为例,点击图中按钮开始运行web工程. 2.设置断 ...
- Make Palindrome CodeForces - 600C（思维）
A string is called palindrome if it reads the same from left to right and from right to left. For ex ...
- MT【91】空间余弦定理
评:空间余弦定理:空间四边形$ABCD$中$cos<AC,BD>=\frac{|(|AB|^2+|CD|^2)-(|BC|^2+|AD|^2)}{2|AC||BD|}$,证明用向量.
- 【刷题】BZOJ 4977 [Lydsy1708月赛]跳伞求生
Description 小Q最近沉迷于<跳伞求生>游戏.他组建了一支由n名玩家(包括他自己)组成的战队,编号依次为1到n.这个游 戏中,每局游戏开始时,所有玩家都会从飞机上跳伞,选择一个目 ...
- php中的动态变量的一个应用
原文:https://www.cnblogs.com/JimmyBright/p/9869168.html 某些情况下,可以代替switch语句,大大简化代码,非常有意思哦 $list = [ [ ' ...