Angular 下的 directive （part 1）

directive 指令

Directive components 指令部分

使用指令自动引导一个AngularJS应用。ngApp指令指定应用程序的根元素,通常是放在页面的根元素如：

<body> or <html>标签。

AngularJS应用程序可以自动引导HTML文档、首先在文档中找到ngApp将被引导为应用程序的根元素。

在HTML文档中运行多个应用程序您必须手动引导他们使用angular.bootstrap来代替。

AngularJS应用程序不能相互嵌套。

您可以指定一个AngularJS模块作为根模块用于应用程序。应用程序被引导时这个模块将加载到注入器以及

应用程序需要的代码或者依赖于其他模块包含的代码angular.module中有跟多的信息

下面的这个例子中，如果ngApp指令没有放在html文档不会被编译,AppController将不能够被实例化为

{{ a+b }} 等于 3

所以要这么写

HTML：

I can add: {{a}} + {{b}} = {{ a+b }} // i can add: 1 + 2 = 3;

</div>

angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {

$scope.a = 1;

$scope.b = 2;

});

</script>

</body>

Javascript:

angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});

Directive Info (指令信息)

这个指令执行优先级为0。

Usage

作为属性：

<ANY
  ng-app="">
    ...
</ANY>

Arguments

Param	Type	Details
ngApp	angular.Module	可配置应用程序模块被载入

a

修改A标签的默认行为,阻止默认动作当Href属性为空的时候。

这种变化使得很容易用ngClick指令创建创建操作链接，而不改变位置或导致页面重新加载

例如：

<a href="" ng-click="list.addItem()">Add Item</a>

Usage

as element:

<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

这个指令执行优先级99。

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

这个目前就支持webkit内核的。参考网址来了解它一下

http://developer.51cto.com/art/201309/410720.htm

使用Angular标签如{{}}对ngSrcset属性操作不正确,浏览器将获取的URL字面量{{hash}}直到Angular替换它里面的表达式{{hash}}，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 （不可用，不可显示）

我们不应该这样做，应为他仅对chrome FF浏览器可用，对ie8 已经之前的版本不可用。

<button disabled="{{scope.isDisabled}}">Disabled</button>

</div>

HTML规范不要求浏览器禁用等保护布尔属性的值。（true证明可用，false为不可用）

如果我们在angular里面放一个这样的属性，当浏览器移除此属性，绑定信息将丢失。

ngDisabled指令解决了这个为题关于disabled的属性，这种互补的指令不会被浏览器撤销，因此

提供了一个永久可靠存储绑定信息的地方。

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

HTML规范不要求浏览器禁用等保护布尔属性的值。（true证明可用，false为不可用）

如果我们在angular里面放一个这样的属性，当浏览器移除此属性，绑定信息将丢失。

ngChecked指令解决了这个为题关于checked的属性，这种互补的指令不会被浏览器撤销，因此

提供了一个永久可靠存储绑定信息的地方。

Directive Info

这个指令执行优先级100。

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 (只读)

HTML规范不要求浏览器禁用等保护布尔属性的值。（true证明可用，false为不可用）

如果我们在angular里面放一个这样的属性，当浏览器移除此属性，绑定信息将丢失。

ngReadonly指令解决了这个为题关于readonly的属性，这种互补的指令不会被浏览器撤销，因此

提供了一个永久可靠存储绑定信息的地方。

Directive Info

这个指令执行优先级100。

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

HTML规范不要求浏览器禁用等保护布尔属性的值。（true证明可用，false为不可用）

如果我们在angular里面放一个这样的属性，当浏览器移除此属性，绑定信息将丢失。

ngSelected指令解决了这个为题关于selected的属性，这种互补的指令不会被浏览器撤销，因此

提供了一个永久可靠存储绑定信息的地方。

Directive Info

这个指令执行优先级100。

Usage

Arguments

Param	Type	Details
ngSelected	expression	如果表达式为真，那么这个特别的属性“selected” 将被设置

ngOpen

只是一个创意性的东西，在所有的浏览器中都不兼容

ngForm

form 嵌套指令，HTML表单元素不允许嵌套。它通常对嵌套表单很有效果。例如：如果一个子集合的有效性的控制需要确定。

注释：我们的目的是让 ng-form 能进行成组的控制。但是不能代替原有的 <form> 标签，于它的所有功能。（如发布到服务器,……）

Directive Info

这个指令执行优先级为0。

Usage

as element://作为元素 (这个指令可以用作自定义元素,但是注意在IE中的限制).

<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

HTML文本区元素控制angular数据绑定,这个元素的数据绑定和验证和输入元素完全相同。

Directive Info

这个指令执行优先级为0。

Usage

as element:

<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

HTML控制着表单输入元素，当在跟ng-model一起使用的时。它提供了数据绑定,输入状态控制和验证。输入控件是HTML5输入类型

input控制着一下的一些ＨＴＭＬ５表单类型以及对一个老版本的ＨＴＭＬ５的验证行为。

注释：不是每个功能提供对所有输入类型可用。指定，数据绑定和事件处理ng-model不支持input[file]

详细描写：https://docs.angularjs.org/api/ng/directive/input

ngForm

form 嵌套指令，HTML表单元素不允许嵌套。它通常对嵌套表单很有效果。例如：如果一个子集合的有效性的控制需要确定。

注释：我们的目的是让 ng-form 能进行成组的控制。但是不能代替原有的 <form> 标签，于它的所有功能。（如发布到服务器,……）

Directive Info

这个指令执行优先级为0。

Usage

as element://作为元素 (这个指令可以用作自定义元素,但是注意在IE中的限制).

<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

HTML文本区元素控制angular数据绑定,这个元素的数据绑定和验证和输入元素完全相同。

Directive Info

这个指令执行优先级为0。

Usage

as element:

<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

HTML控制着表单输入元素，当在跟ng-model一起使用的时。它提供了数据绑定,输入状态控制和验证。输入控件是HTML5输入类型

input控制着一下的一些ＨＴＭＬ５表单类型以及对一个老版本的ＨＴＭＬ５的验证行为。

注释：不是每个功能提供对所有输入类型可用。指定，数据绑定和事件处理ng-model不支持input[file]

详细描写：https://docs.angularjs.org/api/ng/directive/input

ngModel

这个东西真心的好多，而且大体上都是一个样子的。总之用的会很广，就懒下不翻译了，自己看看。然后进行下一个

具体的位置在这里：https://docs.angularjs.org/api/ng/directive/ngModel 然后里面的方法一个个的打开看看

这里就简单的介绍下

ngModel指令绑定一个输入、选择、文本区(或自定义表单控件)使用NgModelController范围上的一个属性,创建和使用本指令。

1.ngModel负责如下：绑定到模型的视图，用于指令输入,文本区或选择要求。

2.需要提供验证行为(即,号码,电子邮件,url)。

3.保持的状态控制(有效/无效,脏/原始,触摸/非触摸,验证错误)。

4.设置相关的css类的元素(ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched)包括动画。

5.父窗口注入控制

<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>

ngChange

//当表单有所改变的时候去执行，就是跟点击事件差不多了，基本上都是调用一个函数去执行。

<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 方法后，那么输入值如果不是数组的，默认在 ng-model里面是不会显示出来的。

文本输入,转换之间的分隔的字符串和字符串数组。默认的分隔符是一个逗号,后跟一个空间相当于ng-list=", "

您可以指定一个自定义分隔符的值——例如ngList属性ng-list=" | ".

该指令方法受到 ngTrim 属性的影响

1：如果ngTrim设置成了false，然后空格分隔符和每个列表项都可以使用。这意味着用户的指令负责处理空白,还允许您使用空格作为分隔符,例如标签或换行符。

2：否则空格分隔符分割时可以忽略周围的(尽管它是推荐

当加入列表项)和空白在每个列表项剥夺之前添加到模型中。

ngValue

绑定了如下表达式的值input[select] or input[radio]，所以当元素被选中selected的时候ngModel元素设置为绑定值也就是value的值。

Directive Info

这个指令执行优先级为0。

<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

使用ngModelOptions您可以指定自定义的事件列表，这将触发一个模型更新和/或消除抖动延迟，所以实际只更新一个计时器到期时发生;

这个计时器将重置后另一个变化。

Arguments

Param	Type	Details
ngModelOptions	object	选择适用于当前的模型。有效值是: `updateOn`:字符串指定应该输入绑定到哪个事件。你可以使用一个空间分隔的列表设置几个事件。有一个特殊事件 default 来匹配默认的事件。 debounce：整数值包含防反跳模型更新值以毫秒为单位。值0触发立即更新。如果对象支持，您可以指定一个自定义值为每一个事件; 例如： ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" allowInvalid：布尔值,表明该模型可以设置值不能正确的配置行为设置模型来定义。 getterSetter：布尔值决定是否将函数绑定到ngModel getter / setter。 timezone:定义要使用的时区读/写 data 实例在模型<input type="date">, <input type="time">, ... 现在仅支持值是UTC,否则将使用浏览器的默认时区。

ngBind

ngBind属性告诉angular来取代指定的HTML元素的文本内容.表达式的值的变化时，便更新文本内容。

通常,你不直接使用ngBind,而是使用{{表达式}}，可以减少冗长。

如果Angular编译，模板暂时由浏览器显示其原始状态之前。最好使用ngBind代替{ {表达式} }，因为ngBind是一个元素的属性,

它可以使用户看不见的绑定在页面加载，也就是说看不到{{}}表达式的东西。

另一个解决这个问题将是使用ngCloak指令。

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 and ngClassEven 完全按照ngclass来工作，除了他们在一起工作，

除了他们在结合ngRepeat工作和只在奇数(偶数)行生效。

这个指令可以应用只有ngRepeat的范围内。

Usage

as attribute:

<ANY

ng-class-odd="">

...

</ANY>

as CSS class:
<ANY class="ng-class-odd: ;"> ... </ANY>

Arguments

Param Type Details

ngClassOdd expression

表达式eval,结果可以是一个字符串,用空格分割类或一个数组。

ngClassEven 跟 ngClassOdd 正好相反

Param	Type	Details
ngBind	expression	表达式来评估

Param	Type	Details
ngBindTemplate	string	模板从 `{{` `expression` `}}` eval.

Param	Type	Details
ngBindHtml	Expression	解析表达式.

Param	Type	Details
ngClassOdd	expression	表达式eval,结果可以是一个字符串,用空格分割类或一个数组。

posted @ 2014-10-23 10:41 小数阅读(680) 评论(0) 编辑收藏举报

刷新页面返回顶部

小数-博客

QQ:283125476

Angular 下的 directive （part 1）

directive 指令

Directive components 指令部分

Directive Info (指令信息)

Usage

Arguments

a

Usage

ngHref

Directive Info

Usage

Arguments

ngSrc

Directive Info

Usage

<IMG

ngSrcset

Directive Info

Usage

Arguments

ngDisabled （不可用，不可显示）

Directive Info

Usage

Arguments

ngChecked

Usage

Arguments

ngReadonly (只读)

Usage

ngSelected

Directive Info

这个指令执行优先级100。

Usage

Arguments

ngOpen

ngForm

Directive Info

Usage

Arguments

textarea

Directive Info

Usage

Arguments

input

ngForm

Directive Info

Usage

Arguments

textarea

Directive Info

Usage

Arguments

input

ngModel

ngList

ngValue

Directive Info

ngModelOptions

Arguments

ngBind

Directive Info

这个指令执行优先级为0。

Usage

Arguments

Example

ngBindTemplate

Usage

Arguments

ngBindHtml

Directive Info

Usage

Arguments

ngClass

Directive Info

Usage

ngClassOdd

Usage

Arguments