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
ngClassOdd
andngClassEven 完全按照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 ...
随机推荐
- http-cache浏览器缓存
摘至知乎 首先得明确 http 缓存的好处 减少了冗余的数据传输,减少网费 减少服务器端的压力 Web 缓存能够减少延迟与网络阻塞,进而减少显示某个资源所用的时间 加快客户端加载网页的速度 常见 ht ...
- LeetCode-765.情侣牵手
N 对情侣坐在连续排列的 2N 个座位上,想要牵到对方的手. 计算最少交换座位的次数,以便每对情侣可以并肩坐在一起. 一次交换可选择任意两人,让他们站起来交换座位. 人和座位用 0 到 2N-1 的整 ...
- mysql学习(2)-Navicat Premium 12 链接MySQL8.0.11数据库报2059错误
Navicat Premium 12 链接MySQL8.0.11数据库报2059错误 1,问题现象 安装完MySQL8.0.11和Navicat Premium12后,我们会用Navicat去测试连接 ...
- 作业三:LINUX内核的启动过程
作业三:LINUX内核的启动过程 一.使用GDB跟踪内核从start_kernel到init进程启动(附实验截图) (一)使用自己的Linux系统环境搭建MenuOS的过程 下载内核源代码编译内核 c ...
- Linux内核分析(第三周)
构造一个简单的linux系统menuOS. 一.简介 1.两把宝剑:中断-上下文的切换(保存现场和恢复现场) 进程-上下文的切换 2.linux-3.18.6 arch/x86目录下的代码是我们重点关 ...
- Daily Scrum 11.1
今天放假一天,明天又是新的一周,预计开始Alpha版本所有功能的整合和优化,争取在两天内完成各种功能的整合. Member Task on 11.1 Task on 11.2 仇栋民 放假一天 开始T ...
- Visual Studio 2013安装及简单的单元测试
Visual Studio 2013安装部分首先到观望下载了英文版和简体中文的语言包.但是更新语言包时总是失败,安装vs需要等待的时间也很大.后来重新装了一遍系统(这个卸载也很麻烦),从其他网站下了中 ...
- WPF和js交互 调用窗体中的方法
public partial class WebTest: Window { private void Window_ContentRendered(object sender, EventArgs ...
- Linux命令(二十四) 磁盘管理命令(二) mkfs,mount
一.格式化文件系统 mkfs 当完成硬盘分区以后要进行硬盘的格式化,mkfs系列对应的命令用于将硬盘格式化为指定格式的文件系统.mkfs 本身并不执行建立文件系统的工作,而是去调用相关的程序来执行.例 ...
- 【JavaService】使用Java编写部署windows服务
如果你玩windows系统,你对服务这个东西并不会陌生,服务可以帮我们做很多事情,在不影响用户正常工作的情况下,可以完成很多我们需要的需求. 众所周知,微软的visio studio内置的Servic ...