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 ...
随机推荐
- Linux下tomcat的启动,关闭,以及shutdown失败杀死进程的方法
1.tomcat服务器第一次启动并查看启动日志的命令 在 ../bin 文件夹下输入./startup.sh;tail -f ../logs/catalina.out 2.需要重启服务器的时候 在 . ...
- Gartner研究副总裁:人工智能的五点傲慢与偏见
对于人工智能能够为各企业机构完成哪些任务,IT与业务领导者们时常感到困惑,并深受多个人工智能错误观念的困扰.全球领先的信息技术研究和顾问公司Gartner认为,开发人工智能项目的IT与业务领导者必须分 ...
- 对Java8 stream的简单实践
最近学习很多Java8方面的新特性,特地做了一些简单的实践和总结. import java.util.*; import java.util.stream.Collectors; public cla ...
- Daily Scrumming* 2015.12.16(Day 8)
一.团队scrum meeting照片 二.成员工作总结 姓名 任务ID 迁入记录 江昊 任务1036 https://github.com/buaaclubs-team/temp-front/com ...
- team330团队铁大兼职网站使用说明
项目名称:铁大兼职网站 项目形式:网站 网站链接:http://39.106.30.16:8080/zhaopinweb/mainpage.jsp 开发团队:team330 网站上线时间:2018年1 ...
- 冲刺Two之站立会议1
今天我们开始了第二个冲刺期的工作,大家重新讨论了下个阶段的工作内容,由于上次演示我们主要只是实现了摄像头开启.通信和语音通话的功能,而且各部分还有待完善.所以我们决定了之后的主要工作的内容:之前服务器 ...
- squid介绍和作用
介绍 squid服务程序是一款在Unix系统中最为流行的高性能代理服务软件,通常会被当作网站的前置缓存服务,用于替代用户向网站服务器请求页面数据并进行缓存,通俗来讲,Squid服务程序会接收用户的请求 ...
- kubectl 命令记录 转帖自: https://www.kubernetes.org.cn/doc-45
kubectl annotate – 更新资源的注解. kubectl api-versions – 以“组/版本”的格式输出服务端支持的API版本. kubectl apply – 通过文件名或控制 ...
- array_pop()方法
array_pop — 将数组最后一个单元弹出(出栈) 说明 mixed array_pop ( array &$array ) array_pop() 弹出并返回 array 数组的最后一个 ...
- js 复制到剪切板
function copyTextToClipboard(text) { var copyFrom = $('<textarea/>'); copyFrom.text(text); $(' ...