Angular 下的 directive （part 1）

时间 2020-08-18

标签 angular directive 栏目 AngularJS 繁體版

原文原文链接

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	可配置应用程序模块被载入javascript

a

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

这种变化使得很容易用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属性中{{}}值。这样html

angular替换连接就被失败了，一般显示为 404 错误java

ngHref指令将解决这个问题 （指令由angrular自带的，也有本身定义的 往后会知道指令的重要性）

错误的写法是：angularjs

<a href="http://www.gravatar.com/avatar/{{hash}}"/>

正确的方法去写它：web

<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	任何字符串能够包含在 `{{}}`标签里 .chrome

ngSrcset

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

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

使用Angular标签如{{}}对ngSrcset属性操做不正确,浏览器将获取的URL字面量{{hash}}直到Angular替换它里面的表达式{{hash}}，ngSrcset指令解决这个问题

不建议的写法：express

<img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>

建议的方案：bootstrap

  <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指令解决了这个为题关于r eadonly的属性，这种互补的指令不会被浏览器撤销，所以

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

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 正好相反

1. [Angular] Directive. 1
2. Angular--Directive
3. angular directive
4. [Angular Directive] Structure directive and
5. Part 6 AngularJS ng repeat directive
6. Angular 2 Directive
7. Angular 2 Directive Lifecycle
8. angular指令 directive
9. angular directive scope
10. angular之directive(二)
更多相关文章...
• Swift 下标脚本 - Swift 教程
• ionic 下拉刷新 - ionic 教程
• Docker容器实战(七) - 容器眼光下的文件系统
• IDEA下SpringBoot工程配置文件没有提示