Angular API 核心组件之指令篇

1 ngApp

利用这个指令可以自动触发Angular程序，ngApp指令指定了angular 应用的根节点，一般都会把这个指令绑定在页面的根节点上，例如：<body>或者<html>标签。

每个页面只有一个AngularJs的应用可以被自动触发，文档中第一个ngAPP指令会自动触发AngularJs应用。如果在一个html文档中想触发多个AngularJs的应用，你需要用angular.bootstrap来手动触发。angularJs应用不能互相嵌套。

你可以为angular应用指定一个angular 模块作为根模块，当应用程序被触发时，这个模块就会加载到$injector中，还需要加载应用代码需要后者依赖的其他模块。

<!DOCTYPE html>
<html ng-app="moduleName">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-controller="testCtrl">
<p>1+2={{1+2}}</p>
<script type="text/javascript">
    angualr.module('moduleName',[])
            .controller('testCtrl',function(){
                //some code going here
            })
</script>
</body>
</html>

2 a

改写了html a标签的默认行为，当href为空的时候，默认的行为被阻止了，所以不会发生跳转。

3 ngHref

在href属性中直接写angular标记{{hash}}，当用户在angular替换{{hash}}的值之前就点击了链接，那么就会链接到错误的地址，通常会返回404错误。

错误的写法：

正确的写法

4 ngSrc

在src属性中使用angular标记{{hash}}不会得到正确的结果，在angular未替换{{hash}}的值之前，浏览器会通过字面{{hash}}的意思去获取src资源。这样就会导致错误。ngSrc解决了这个问题

有bug的写法：

<img src="http://www.somelinks.com/{{hash}}" />

正确的写法：

<img ng-src="http://www.somelinks.com/{{hash}}" />

5 ngSrcset

直接在元素的属性中使用srcset＝{{hash}}或导致浏览器链接在错误的地址，直到angular替换表达式里面的值，ngSrcset解决了这个问题。

例如：

导致错误的写法：

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

正确的写法：

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

6 ngDisabled

我们不应该用如下的方式设置disabled的值，这样会导致按钮在Chrome和Firefox中可以点击，而在ie8及以下的版本中无法点击。

<div ng-init="scope = { isDisabled: false }">
 <button disabled="{{scope.isDisabled}}">Disabled</button>
</div>

　　HTML规范中规定，对于disabled等属性，不需要给出特定的值，（他们的出现就等于true，不出现就是false）例如：

<input type="text" disabled />

如上例所示，angular在disabled的属性中插入了一个表达式，当浏览器移除这个属性的时候（没解释通。。。），绑定的信息就丢失了。 ngDisabled属性解决了这个问题，这个新增的指令不会被浏览器移除，可以永久绑定scope中对应的值。

同样新增的指令还有：

ngChecked ngReadOnly ngSelected ngOpen（html5 details的一个属性）

7 ngForm

这个指令可以让form实现嵌套。HTML不允许嵌套的form属性，但嵌套的form属性用处很大，例如，需要对某一个子group元素的有效性的验证。

用法：

<ng-form
  [name=""]>
...
</ng-form>

注意：ngForm属性不是为了取代form属性的全部功能。

8 form

这个指令会实例化FormController，如果指定了form的name属性，会在当前的scope下创建一个名字为name的值formController。

别名：ngForm

在angular中表单form可以嵌套。这意味着当内层所有的子表单有效那么外层的form也是有效的。然而，浏览器不支持嵌套的form元素，所以angular新增了ngForm指令，它的行为与form相同，但是可以实现嵌套。这样你就可以实现form表单的嵌套，当使用angular指令验证以ngRepeat动态生成的form表单时，非常有用。因为你不能改变动态生成的input等元素的name属性，你需要把这些重复的input元素包裹在ngform指令下，在把这些ngform指令放在外层的form元素中。

css类名

ng-valid :当form表单有效时会添加这个类名

ng-invalid :form表单无效时，会添加这个类名

ng-pristine : form表单没有变化时添加这个类名

ng-dirty : 输入的值曾经输入过，会添加这个类名

注意：当有类名增加或者删除时，ngAnimate会察觉到。

提交form表单和阻止默认行为

angular中form的提交不应该是由浏览器提交到服务器然后reload整个页面，而是应该触发某些javascript逻辑来提交表单。angular阻止了form的默认行为除非form元素指定了action属性的值。

你可以用以下两种方法来决定，当form提交时，哪一个javascript方法会被调用。

ngSubmit，在form元素上指定
ngclick 在button或者input type＝"submit"属性上指定

为了防止会出现两次提交得现象，请选择ngSubmit或者ngClick中的一种，这是应为HTML规范中规定的以下表单提交规则：

如果form只有一个input域那么在input中点击enter就会触发form 提交（ngSubmit）
如果form有两个input域，但是没有button或者 input［type＝submit］那么按下enter键不会触发submit
如果form有一个或者多个input域并且一个或者多个button或者input［type＝submit］，那么在任意一个input域按下enter键就会触发第一个按钮或者input［type＝submit］（ngClick）的click处理函数，并且提交最近的form表单。

动画相关

当任何相关的css类名添加和移除的时候,都会触发form的Animation。这些class有 .ng-prinstine .ng-dirty .ng-invalid .ng-valid. ngForm中的Animation行为和ngClass行为相似，animation可以与css的transition，keyframes和JS animation相关联。

下面的示例简单的展示了如何利用css transition 来样式化一个form元素，当form没有通过验证时候，就会增加invalid类名

.my-form {
  transition:0.5s linear all;
  background: white;
}
.my-form.ng-invalid {
  background: red;
  color:white;
}

注意：请确认引用了ngAnimatie服务。angular.module('includeExample', ['ngAnimate'])

9 textarea

HTML textarea元素与angualr中相关的数据相绑定，用法：

<textarea
  ng-model=""
  [name=""]
  [required=""]
  [ng-required=""]
  [ng-minlength=""]
  [ng-maxlength=""]
  [ng-pattern=""]
  [ng-change=""]
  [ng-trim=""]>
...
</textarea>

10 input

HTML input元素，用来与angular相关数据进行绑定，input 增加了html5的type类型，并且为老的浏览器增加了html5验证行为。

<input
  ng-model=""
  [name=""]
  [required=""]
  [ng-required=""]
  [ng-minlength=""]
  [ng-maxlength=""]
  [ng-pattern=""]
  [ng-change=""]
  [ng-trim=""]>
...
</input>

ngModel ：用来指定angular表达式进行数据绑定

name ：Property name of the form under which the control is published.

required：如果没有值输入那么就会为required添加error 键

ngRequired ：如果设置为true就会设置required 属性

ngMinlength ：如果输入的值长度小于ngMinlength，会添加error 键

ngMaxlength ：

ngPattern：如果输入的值不符合 ngPattern，就会添加error 键

例子：

<script>
   angular.module('inputExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.user = {name: 'guest', last: 'visitor'};
     }]);
</script>
<div ng-controller="ExampleController">
  <form name="myForm">
    User name: <input type="text" name="userName" ng-model="user.name" required>
    <span class="error" ng-show="myForm.userName.$error.required">
      Required!</span><br>
    Last name: <input type="text" name="lastName" ng-model="user.last"
      ng-minlength="3" ng-maxlength="10">
    <span class="error" ng-show="myForm.lastName.$error.minlength">
      Too short!</span>
    <span class="error" ng-show="myForm.lastName.$error.maxlength">
      Too long!</span><br>
  </form>
  <hr>
  <tt>user = {{user}}</tt><br/>
  <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
  <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
  <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
  <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
  <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
</div>

10 ngModel

ngModel指令将input，select，textarea等与scope中的一个属性绑定起来，

ngModel负责：

将视图与模型绑定起来
提供验证行为：例如（required，url，number，email）
保存控制器的状态（vaild ／invalid，dirty／pristine，验证错误）
为元素设置相关的css 类名（ng-valid,ng-invalid,ng-dirty,ng-prinstine）
为他的父元素注册控制器

注意：ngModel会试图绑定给出的表达式对应的当前scope内的属性（或变量），如果这个属性或者变量在当前的scope中不存在，会隐式的在当前scope中创建这个变量

想了解更多ngModel信息，请点击：

https://github.com/angular/angular.js/wiki/Understanding-Scopes

css类名

input/select/textarea元素根据ngModel的验证情况，会相应的添加或删除以下的css类名

ng－valid 如果通过了验证
ng－invalid 没有通过验证
ng－prinstine 当前值时默认值没有改变
ng－dirty 当前值输入过

牢记ngAnimate可以检测到这些类名的添加或者移除。

Animation hooks（动画相关／动画绑定）

input等添加了ngModel指令的元素，当任何的css类名添加或者删除的时候，就会触发模型的animation。这些css类名是 ng－valid， ng－invalid， ng－dirty，ng－prinstine。

11 ngChange

当用户改变了input元素的值的时候，会计算給定的表达式。这个表达式的计算是立即执行的。不同于javascript的onChange事件，只有在change事件结束的时候才会触发（通常是用户离开了表单元素或者是按下了回车键）。当变化是来自于模型的时候，ngChange的表达式是不会执行的。

注意：需要ngModel指令。

12 ngList

将input的值转化成分隔符链接的字符串和字符串数组。分隔符可以是指定的字符（默认是逗号）或者是一个正则表达式

<script>
  angular.module('listExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.names = ['igor', 'misko', 'vojta'];
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  List: <input name="namesInput" ng-model="names" ng-list required>
  <span class="error" ng-show="myForm.namesInput.$error.required">
    Required!</span>
  <br>
  <tt>names = {{names}}</tt><br/>
  <tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/>
  <tt>myForm.namesInput.$error = {{myForm.namesInput.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>

13 ngValue

将固定的表达式与input［value］或者input［radio］绑定起来，所以当元素被选择的时候，这个元素的ngModel会得到绑定元素的值。

ngValue用处很大，当用ng－repeat动态生成radio单选按钮的时候，请看下面示例：

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

14 ngBind

ngBind指令告诉Angular用給定的表达式的值替换指定的HTML元素的内容，并且当表达式的值发生变化的时候更新HTML元素的值。

通常情况下，不是直接使用ngBind指令，你可以使用两层花括号｛｛表达式｝｝，他们的功能相同。

但是，模版在angular编译之前就会被浏览器显示出来，这种情况下，请用ngBind指令替换｛｛｝｝；因为ngBind是一个元素的属性，当页面在加载的时候，元素的属性对于用户来说是不可见的。

15 ngBindTemplate

ngBindTemplate指令指定了元素的文本内容应该被ngBindTemplate中代表的值替换掉。不同于ngBind 的指令，ngBindTemplate可以包含多个｛｛｝｝表达式。例如当title或者option等HTML元素没有办法包含span标签时，ngBindTemplate指令可以做到。

16 ngBindHtml

创建一个绑定，用一个安全的方式将绑定的带有html标记的内容插入到绑定的HTML元素中，默认情况下，被插入的带有html标记的内容会被$sanitize服务进行“消毒”，如果想使用这个功能，请确保$santilize服务已经注入到模块中，将ngSantilize服务作为依赖加载到模块中（不再核心Angular中）。你也可以绕过“消毒处理”

当你任务内容时安全的时候，这个时候，请显示的调用$sce.trustAsHtml().

<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
</div>

angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>';
  }]);

17 ngClass

ngClass指令允许你动态的设置HTML元素的css类名，通过数据绑定一个表达式，这个表达式代表所有将要被添加的类名。

这个指令通过三种不同的方式运行，取决于表达式的值

如果表达式是一个字符串，这个字符串应该是一个或多个空格分割的css 类名
如果表达式是一个数组，数组中的每一个元素都应该是一个由一个或多个空格分割的css类名的字符串，
如果表达式是一个对象，对象中的每一个键值对，值为true的键名就是css类名。

这个指令不会重复添加已经存在的css类名

当绑定的表达式变化时，之前添加的类名会被移除，只有新的css类名会被添加。

<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
<input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
<input type="checkbox" ng-model="error"> error (apply "red" class)
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">
<hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>

18 ngClassOdd

ngClassOdd和ngClassEven指令与ngClass指令相同，不同之处在于，这两个指令与ng－repeat指令合作，在偶数或者奇数行产生作用。所有这两个指令只有和ng－repeat一起使用的时候才可以。

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
  <li ng-repeat="name in names">
   <span ng-class-odd="'odd'" ng-class-even="'even'">
     {{name}}
   </span>
  </li>
</ol>

19 ngCloak

ngCloak 指令用于阻止浏览器闪现未经编译的Angular html 模版。利用这个指令避免出现由于html模版展现引起的烦人的显现效果

这个指令可以绑定在body元素上。但是最佳用法应该是绑定在最小的部分，这样可以更好的渲染浏览器视图。

ngCloak指令和下面的css规则一起合作。请在html页面上添加css模式请添加angular－csp.css 。

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

20 ngController

ngController指令为视图添加控制类。这是angular在m－v－c模式背后提供各种规则。

angular中的MVC 组件：

model － model是scope中的各种属性。scope通过绑定添加到DOM上。
view －模版（绑定数据的html）渲染到视图中。
Controller －ngController 指令指定了一个控制类。这个控制类包含一些业务逻辑的函数和值添加到scope上。

注意：你也可以给DOM添加控制器通过声明他的路径利用$route服务。一个通常会出现的错误是在模版中再次声明了控制器。这会引起控制器添加和执行两次。

21 ngCsp

启用csp（Content security policy）支持。

在开发类似Google Chrome扩展的时候很有用。

csp不允许在程序中使用eval和Function（string）来生成函数。angular中使用csp只有两点不同之处：

不用使用Function构造函数来生成优化的getter函数
不要在文档中注入自定义的样式表。

<!doctype html>
<html ng-app ng-csp>
...
...
</html>

22 ngClick

ngClick指令指定当元素被点击时，指定自定义的行为。

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
<span>

同样的指令还有：ngDblclick ngMousedown ngMouseUp ngMouseover ngMouseenter ngMouseleave ngMousemove ngKeydown ngKeyup ngKeypress

ngSubmit ngFocus ngBlur ngCopy ngCut ngPaste

23 ngIf

ngIf指令移除和重新添加DOM片段通过判断｛表达式｝的值。如果ngIf表达式中的值等于false，那么DOM片段就行文档中移除。否则，就会克隆出这个DOM片段，重新插入到文档中。

ngIf与ngShow和ngHide不同之处在于，ngIf是完全从文档中移除片段而不仅仅是通过css属性display来控制他的显示和隐藏。当使用css选择器例如：first－child，

：last－child要特别注意这一点。

当元素通过ngIf指令移除了之后，他的scope就会被消除，当添加之后，scope会创建。通过ngIf创建的scope会从父scope那里继承原型。一个重要的含义在于，如果ngIf绑定了ngModel指令，ngModel原始绑定到父scope的属性，再这种情况下，任何再子scope中对变量的任何改变都会覆盖父scope中的值。

同样，ngIf指令重新再文档中添加编译后的节点，例如，一个元素的cla杀手属性会在编译之后进行改变，然后这个元素之后被移除了。当ngIf重新添加元素的时候，被添加的css类名会被删除，因为最初的编译的状态用来生成元素。

动画

enter，leave

Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
  I'm removed when the checkbox is unchecked.
</span>

24 ngInclude

获取，编译，包含一个外部的html片段。

默认情况下，模版的url的域名和协议需要和应用程序的域名协议相同。这个可以通过调用$sce.getTrustedResourceUrl来实现。加载不再同一个域名或协议下的html模版可以把他们加入到白名单或者封装他们成可以信任的值。参考 angular Contextual Escaping。

除了以上情况，浏览器的同源策略和跨域资源贡献策略会进一步限制模板是否下载成功，例如，所有浏览器下的跨域请求和部分浏览器的file：//ngInclude无效。

使用方法：

<ng-include
  src=""
  [onload=""]
  [autoscroll=""]>
...
</ng-include>

或者

<ANY
  ng-include=""
  [onload=""]
  [autoscroll=""]>
...
</ANY>

css类名

<ANY class="ng-include: ; [onload: ;] [autoscroll: ;]"> ... </ANY>

25 ngInit

ngInit允许你再当前的scope中对表达式求值或赋值。

最恰当的使用ngInit是对ngRepeat赋别名，除了这种情况，你最好再controller中初始化元素。

26 ngNonBindable

ngNonBindable指令告诉angular不要编译当前的DOM元素或绑定内容，如果元素包含了Angular指令和绑定，但是这些指令应该被angular忽略掉。例如：当你想要展示一个代码片段的时候。

<div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div>

27 ngPluralize

这个指令使用英文本地化的规则来展示信息，这个规则与angular.js绑定，但是可以被重写（查看angular i18n开发规则），你使用ngPluralize指令指定复数类别与展现的字符串之间的映射。

28 ngRepeat

ngRepeat指令为数据集中的每一项都实例化一个模板。每个模板实例都有自己的scope，循环变量赋给当前的数据集选项，$index变量是项目索引或者关键字。

每个实例化模板在当前的scope中都有一些特殊属性。

$index －数字，重复元素的偏移liang

$first －布尔值如果当前元素是第一个则返回true，否则返回false

$middle －布尔值如果当前元素在第一个和最后一个中间就返回true

$last －布尔值如果当前元素是迭代器的最后一个元素

$even －布尔值如果当前元素的$index是偶数就返回true

$odd －布尔值如果当前元素的$index是奇数

指定重复的开始和结束点

重复一系列的元素而不是一个父元素。ngRepeat指令可以通过ng-repeat-start,ng-repeat-end明确的给出重复的起始点来扩展迭代器的范围。ng-repeat-start指令和ng-repeat指令一样，但是会重复包含在ng-repeat-end指令之内的所有html标签。

<header ng-repeat-start="item in items">
  Header {{ item }}
</header>
<div class="body">
  Body {{ item }}
</div>
<footer ng-repeat-end>
  Footer {{ item }}
</footer>

29 ngShow

ngShow指令通过判断表达式返回的布尔值来决定显示还是隐藏html标签，元素的显隐通过添加或者移除.ng-hide css类名。　.ng-hide css class已经在angular中预定义了，会把元素的display属性设置为none。CSP模式下，请在页面中添加angular-csp.css。

<!-- 当 $scope.myValue 为真的时候，元素显示出来 -->
<div ng-show="myValue"></div>

<!-- 当 $scope.myValue 为假的时候，元素被隐藏 -->
<div ng-show="myValue" class="ng-hide"></div>

注意：以下的值在ngShow中会被认为是false："f","0","false","no","n","[]"

重写.ng-hide

默认情况下，ng－hide 会让元素显示为 display：none！important。如果你想改变隐藏的行为，你可以重写ng－hide

.ng-hide {
//另一种隐藏元素的方式
display:block!important;
position:absolute;
top:-9999px;
left:-9999px;
}

关于ngShow动画的注意事项

当指令的表达式为true或者false时，会出发ngShow／ngHide的动画事件，

//
//a working example can be found at the bottom of this page
//
.my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition:0.5s linear all;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }

30 ngHide

参考ngShow

31 ngStyle

32 ngSwitch

33 ngTransclude

33 script

34 select

posted @ 2014-09-12 23:23 丁家小花花阅读(2768) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

丁家小花花

Angular API 核心组件之 指令篇

1 ngApp

2 a

3 ngHref

4 ngSrc

5 ngSrcset

6 ngDisabled

7 ngForm

8 form

css类名

提交form表单和阻止默认行为

动画相关

9 textarea

10 ngModel

css类名

Animation hooks（动画相关／动画绑定）

11 ngChange

12 ngList

13 ngValue

14 ngBind

15 ngBindTemplate

16 ngBindHtml

17 ngClass

18 ngClassOdd

19 ngCloak

20 ngController

21 ngCsp

22 ngClick

23 ngIf

动画

24 ngInclude

25 ngInit

26 ngNonBindable

27 ngPluralize

28 ngRepeat

指定重复的开始和结束点

29 ngShow

重写.ng-hide

关于ngShow动画的注意事项

30 ngHide

31 ngStyle

32 ngSwitch

33 ngTransclude

33 script

34 select

公告

Angular API 核心组件之指令篇