Angular 下的 directive (part 1)
directive 指令
Directive components 指令部分
<body> or <html>标签。 angular.bootstrap来代替。angular.module中有跟多的信息 下面的这个例子中,如果ngApp指令没有放在html文档不会被编译,AppController将不能够被实例化为{{ a+b }} 等于 3 所以要这么写angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
$scope.a = 1;
$scope.b = 2;
});
Directive Info (指令信息)
Usage
<ANY
ng-app="">
...
</ANY>
Arguments
| Param | Type | Details |
|---|---|---|
| ngApp | angular.Module |
可配置应用程序模块被载入 |
a
修改A标签的默认行为,阻止默认动作当Href属性为空的时候。
<a href="" ng-click="list.addItem()">Add Item</a>Usage
<a>
...
</a>
///////////////////////////////////////////////////////
<body ng-app="ngAppDemo">
<div ng-controller="ngAppDemoController">
<a href="" ng-click="list.addItem()">Add Item</a>
</div>
<script type="text/javascript">
angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
$scope.list = {
addItem: function() {
alert("test");
}
}
});
</script>
</body>
ngHref
Angular是用{{}}来标记的,在用户点击的时候angrual还咩有去替换href属性中{{}}值。这样
angular替换链接就被失败了,通常显示为 404 错误
ngHref指令将解决这个问题 (指令由angrular自带的,也有自己定义的 日后会知道指令的重要性)
错误的写法是:
<a href="http://www.gravatar.com/avatar/{{hash}}"/>
正确的方法去写它:
<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>
Directive Info
Usage
<A
ng-href="">
...
</A>
Arguments
| Param | Type | Details |
|---|---|---|
| ngHref | template |
任何字符串可以包含{{}}里。
|
ngSrc
使用Angular标签如{{}}对src属性操作不正确,浏览器将获取的URL字面量{{hash}}直到Angular替换它里面的表达式{{hash}},ngSrc指令解决这个问题
不建议的写法:
<img src="http://www.gravatar.com/avatar/{{hash}}"/>
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
Directive Info
这个指令执行优先级99。
Usage
<IMG
ng-src="">
...
</IMG>
Arguments
| Param | Type | Details |
|---|---|---|
| ngSrc | template |
任何字符串可以包含在 |
ngSrcset
不建议的写法:
<img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>
建议的方案:
<img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>
Directive Info
这个指令执行优先级99。
Usage
<IMG
ng-srcset="">
...
</IMG>
Arguments
| Param | Type | Details |
|---|---|---|
| ngSrcset | template |
任何字符串可以包含在 |
ngDisabled (不可用,不可显示)
<div ng-init="scope = { isDisabled: false }">
<button disabled="{{scope.isDisabled}}">Disabled</button>
</div>
如果我们在angular里面放一个这样的属性,当浏览器移除此属性,绑定信息将丢失。
Directive Info
这个指令执行优先级100。
Usage
<INPUT
ng-disabled="">
...
</INPUT>
///////////////////////////////////////////////////////
Click me to toggle: <input type="text" ng-model="youname"><br/>
{{youname}}
<button ng-disabled="youname">Button</button>
ng-disabled="youname"写成字符串的时候就可以实现,如果用{{}}就不可用。
Arguments
| Param | Type | Details |
|---|---|---|
| ngDisabled | expression |
如果表达式为真,那么这个特别的属性“disabled”将被禁用 |
ngChecked
如果我们在angular里面放一个这样的属性,当浏览器移除此属性,绑定信息将丢失。
Directive Info
Usage
<INPUT
ng-checked="">
...
</INPUT>
//////////////////////////////////////
Check me to check both: <input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master">
Arguments
| Param | Type | Details |
|---|---|---|
| ngChecked | xpression |
如果表达式为真,那么这个特别的属性“checked” 将被设置 |
ngReadonly (只读)
如果我们在angular里面放一个这样的属性,当浏览器移除此属性,绑定信息将丢失。
eadonly的属性,这种互补的指令不会被浏览器撤销,因此Directive Info
Usage
<INPUT
ng-readonly="">
...
</INPUT>
//////////////////////////////////////////////////
Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
<input type="text" ng-readonly="checked" value="I'm Angular"/>
Arguments
| Param | Type | Details |
|---|---|---|
| ngReadonly | expression |
如果表达式为真,那么这个特别的属性“checked” 将被设置 |
ngSelected
如果我们在angular里面放一个这样的属性,当浏览器移除此属性,绑定信息将丢失。
Directive Info
这个指令执行优先级100。
Usage
Arguments
| Param | Type | Details |
|---|---|---|
| ngSelected | expression |
如果表达式为真,那么这个特别的属性“selected” 将被设置 |
ngOpen
ngForm
Directive Info
Usage
<ng-form
[name=""]>
...
</ng-form>
as attribute: //作为属性
<ANY
[ng-form=""]>
...
</ANY>
as CSS class://作为累,样式
<ANY class="[ng-form: ;]"> ... </ANY>
Arguments
| Param | Type | Details |
|---|---|---|
| ngForm | name
(optional)
|
string |
表单的名称,如果指定,控制器将发表形式到相关名字范围,
|
textarea
Directive Info
Usage
<textarea
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-minlength=""]
[ng-maxlength=""]
[ng-pattern=""]
[ng-change=""]
[ng-trim=""]>
...
</textarea>
Arguments
| Param | Type | Details |
|---|---|---|
| ngModel | string |
可指定的angular数据绑定表达式 |
| name
(optional)
|
string |
属性名的形式控制发表。
|
| required
(optional)
|
string |
如果你的值没有键入,那么设置 required 验证错误的关键 |
| ngRequired
(optional)
|
string |
添加所需的属性,要求验证约束元素ngRequired表达式的求值结果为true。使用ngRequired而不是必需的当你想要数据绑定到所需的属性。
|
| ngMinlength
(optional)
|
number |
如果键入值比最短输入值还少的话,设置的 minlength 就会生效提示错误 |
| ngMaxlength
(optional)
|
number |
如果键入值比最短输入值还多的话,设置的 maxlength 就会生效提示错误 |
| ngPattern
(optional)
|
string |
如果不匹配正则,pattern 错误就会生效,预期值/正则表达式/内联模式或者regexp模式定义为范围表达式。 |
| ngChange
(optional)
|
string |
Angular表达式被执行当输入发生变化时由于输入用户交互元素。 |
| ngTrim
(optional)
|
boolean |
如果设置为false Angular不会减少Input的输入【减少两遍的空格】 (default: true)--->默认为true |
input
input控制着一下的一些HTML5表单类型以及对一个老版本的HTML5的验证行为。
ngForm
Directive Info
Usage
<ng-form
[name=""]>
...
</ng-form>
as attribute: //作为属性
<ANY
[ng-form=""]>
...
</ANY>
as CSS class://作为累,样式
<ANY class="[ng-form: ;]"> ... </ANY>
Arguments
| Param | Type | Details |
|---|---|---|
| ngForm | name
(optional)
|
string |
表单的名称,如果指定,控制器将发表形式到相关名字范围,
|
textarea
Directive Info
Usage
<textarea
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-minlength=""]
[ng-maxlength=""]
[ng-pattern=""]
[ng-change=""]
[ng-trim=""]>
...
</textarea>
Arguments
| Param | Type | Details |
|---|---|---|
| ngModel | string |
可指定的angular数据绑定表达式 |
| name
(optional)
|
string |
属性名的形式控制发表。
|
| required
(optional)
|
string |
如果你的值没有键入,那么设置 required 验证错误的关键 |
| ngRequired
(optional)
|
string |
添加所需的属性,要求验证约束元素ngRequired表达式的求值结果为true。使用ngRequired而不是必需的当你想要数据绑定到所需的属性。
|
| ngMinlength
(optional)
|
number |
如果键入值比最短输入值还少的话,设置的 minlength 就会生效提示错误 |
| ngMaxlength
(optional)
|
number |
如果键入值比最短输入值还多的话,设置的 maxlength 就会生效提示错误 |
| ngPattern
(optional)
|
string |
如果不匹配正则,pattern 错误就会生效,预期值/正则表达式/内联模式或者regexp模式定义为范围表达式。 |
| ngChange
(optional)
|
string |
Angular表达式被执行当输入发生变化时由于输入用户交互元素。 |
| ngTrim
(optional)
|
boolean |
如果设置为false Angular不会减少Input的输入【减少两遍的空格】 (default: true)--->默认为true |
input
input控制着一下的一些HTML5表单类型以及对一个老版本的HTML5的验证行为。
ngModel
ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched)包括动画。<script>
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = '1';
}]);
</script>
<style>
.my-input {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}
</style>
Update input to see transitions when valid/invalid.
Integer is a valid value.
<form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
</form>
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function() {
$scope.counter++;
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
<input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
<label for="ng-change-example2">Confirmed</label><br />
<tt>debug = {{confirmed}}</tt><br/>
<tt>counter = {{counter}}</tt><br/>
</div>
ngList
ng-list=" | ".ngValue
input[select] or input[radio],所以当元素被选中selected的时候ngModel元素设置为绑定值也就是value的值。Directive Info
<script>
angular.module('valueExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { favorite: 'unicorns' };
}]);
</script>
<form ng-controller="ExampleController">
<h2>Which is your favorite?</h2>
<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="radio"
ng-model="my.favorite"
ng-value="name"
id="{{name}}"
name="favorite">
</label>
<div>You chose {{my.favorite}}</div>
</form>
ngModelOptions
Arguments
| Param | Type | Details |
|---|---|---|
| ngModelOptions | object |
选择适用于当前的模型。有效值是:
现在仅支持值是UTC,否则将使用浏览器的默认时区。 |
ngBind
Directive Info
这个指令执行优先级为0。
Usage
- as attribute:
<ANY
ng-bind="">
...
</ANY> - as CSS class:
<ANY class="ng-bind: ;"> ... </ANY>Arguments
Param Type Details ngBind expression 表达式来评估
Example
实时预览文本框中输入一个名称;文本框下面的问候立即变化。<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
Enter name: <input type="text" ng-model="name"><br>
Hello <span ng-bind="name"></span>!
</div>ngBindTemplate
ngBindTemplate指令指定的元素文本内容应该替换为模板的插值,在在ngBindTemplate属性。不像ngBind,ngBindTemplate可以包含多个{ { } }表达式。这个指令需要限制一些HTML元素(如title和option)不能包含SPAN元素。Usage
<ANY
ng-bind-template="">
...
</ANY>Arguments
Param Type Details ngBindTemplate string 模板从
{{expression}}eval.<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.salutation = 'Hello';
$scope.name = 'World';
}]);
</script>
<div ng-controller="ExampleController">
Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><br>
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>ngBindHtml
创建一个绑定,将innerHTML表达式的结果放到当前元素在一个安全的方式。默认情况下,innerHTML-ed内容将使用 $sanitize 服务。利用这个功能,确保 $sanitize 是可用的。例如,通过包括ngSanitize模块的依赖关系(而不是angular核心)。为了使用ngSanitize模块的依赖关系,你需要包括“angular-sanitize。js”在您的应用程序。你也可以用你知道的安全值去绕过sanitization,要做到这一点,通过$sce.trustAsHtml绑定到一个明确的信任值。看下面的这个例子r Strict Contextual Escaping (SCE).注释:如果 $sanitize 服务无效和绑定值不是确定值,将会有异常(而不是一个可用的)。Directive Info
这个指令执行优先级为0。Usage
as attribute:<ANY
ng-bind-html="">
...
</ANY>Arguments
Param Type Details ngBindHtml Expression 解析表达式.
ngClass
ngClass指令允许您动态HTML元素上设置CSS类,数据绑定表达式代表所需添加的类。、该指令有三种不同的方式,这取决于表达式的三种类型:1.如果表达式的求值结果为一个字符串,字符串应该是一个或多个空格分隔类名。2.如果表达式的求值结果为一个数组,应该是一个字符串数组的每个元素是一个或多个空格分隔类名。3.如果表达式的求值结果为对象,然后为每个对象的键-值对可疑值对应的关键是作为类名。该指令不会添加重复的类如果已经设置一个特定的类。当表达变化时,前面添加类都删除,然后再添加新类。Directive Info
这个指令执行优先级为0。Usage
as attribute:<ANY
ng-class="">
...
</ANY>as CSS class:
<ANY class="ng-class: ;"> ... </ANY>ngClassOdd
ngClassOddandngClassEven 完全按照ngclass来工作,除了他们在一起工作,除了他们在结合ngRepeat工作和只在奇数(偶数)行生效。这个指令可以应用只有ngRepeat的范围内。Usage
as attribute:<ANYng-class-odd="">...</ANY>as CSS class:<ANY class="ng-class-odd: ;"> ... </ANY>Arguments
Param Type Details ngClassOdd expression 表达式eval,结果可以是一个字符串,用空格分割类或一个数组。ngClassEven 跟 ngClassOdd 正好相反
Angular 下的 directive (part 1)的更多相关文章
- Angular 下的 directive (part 2)
ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现. 该指令可以应用于<body>元素,但首选使用多个ng ...
- 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 ...
随机推荐
- Python能做什么?
Python作为一个功能强大,并且简单易学的编程语言而广受好评,那么Python都能做些什么呢?概括起来有以下几个方面: 1.Web开发: 2.大数据处理: 3.人工智能: 4.自动化运维: 5.云计 ...
- html5实现拖拽上传头像
1. 将客户端(本地电脑)中的图片拖到网页中 要点: html5 拖放, FileReader html: <div id="container" ondrop=" ...
- M2 Daily SCRUM要求
每个人的工作 (有work item 的ID):昨天已完成的工作,今天计划完成的工作:工作中遇到的困难. 燃尽图 照片 每人的代码/文档签入记录(不能每天都在 “研讨”, 但是没有代码签入) 如实报告 ...
- Daily Scrum NO.6
会议概况 这两日又是由于编译deadline和数据库课程设计使得我们的进度进行缓慢.但是项目的进程仍然在可掌控的范围之内,时间虽然紧,但是应该最终能够实现Beta版本. 这次会议我们总结了之前5个正常 ...
- Linux读书笔记第三、四章
第三章 主要内容: 进程和线程 进程的生命周期 进程的创建 进程的终止 1. 进程和线程 进程和线程是程序运行时状态,是动态变化的,进程和线程的管理操作(比如,创建,销毁等)都是有内核来实现的. Li ...
- 软工实践周六实践课安排(2017秋学期) | K 班
软工实践周六实践课安排(2017秋学期) | K 班 周数 截止时间 工作内容 阶段成果展示形式 验收方式 备注 4之前 2017.10月前 组队 随笔(提供组队名单.组队队员的介绍--包括擅长的地方 ...
- 获取select的 text
JS获取select的value和text值的简单实例 感谢 3lian8 的投递 时间:2014-02-27 来源:三联教程 本篇文章主要是对JS获取select的value和text值的简单实例进 ...
- (转)linux 内存管理——内核的shmall 和shmmax 参数
内核的 shmall 和 shmmax 参数 SHMMAX= 配置了最大的内存segment的大小 ------>这个设置的比SGA_MAX_SIZE大比较好. SHMMIN= 最小的内存seg ...
- 继承Tcalendar控件,让当天日期醒目显示
一.新建一控件 打开Delphi主菜单Cpmponent—New Cpmponent: 二.配置参数 点击OK键,打开Unit单元文件. 三.修改单元文件 unit LyCalendar; inter ...
- MT【201】折线计数
甲乙两人参加竞选,结果甲得n票,乙得m票(n > m) . 则在唱票过程中,甲的累计票数始终超过乙的累计票数的概率是_____________. 答案:$\dfrac{n-m}{n+m}$