Angular下的directive（part1）

作者: 分类: 编程代码 时间:1970-01-01

Angular下的directive（part1）

Directive components  指令部分

 
使用指令自动引导一个AngularJS应用。ngApp指令指定应用程序的根元素,通常是放在页面的根元素如：
<body> or <html>标签。
 
AngularJS应用程序可以自动引导HTML文档、首先在文档中找到ngApp将被引导为应用程序的根元素。
在HTML文档中运行多个应用程序您必须手动引导他们使用angular.bootstrap来代替。
AngularJS应用程序不能相互嵌套。
 
您可以指定一个AngularJS模块作为根模块用于应用程序。应用程序被引导时这个模块将加载到注入器以及
应用程序需要的代码或者依赖于其他模块包含的代码angular.module中有跟多的信息
 
下面的这个例子中，如果ngApp指令没有放在html文档不会被编译,AppController将不能够被实例化为
{{ a+b }} 等于 3
 
所以要这么写
HTML：
<body ng-app="ngAppDemo">
<div ng-controller="ngAppDemoController">
 I can add: {{a}} + {{b}} = {{ a+b }}    // i can add: 1 + 2 = 3;
</div>
<script type="text/javascript">
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 已经之前的版本不可用。














<div ng-init="scope = { isDisabled: false }">


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


 






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


<OPTION ng-selected=""> ... </OPTION>





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()"  />
  <input type="checkbox" ng-model="confirmed"  />
  <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"
              
              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 正好相反
    

    

    

    

    

    

    

     
    

    

    

    • 







 
















 
                    
            
                

                  
 
        
	 
        
      
    
       
       

      

        
      

      

        


           本站代码收录于网上如果侵犯了您的权益请联系删除。
 星云探索 备案:鲁ICP备15006040号-14