angular js指令（directives）及其例子

 <!-- 第1个指令  ng-model 将表单控件和当前作用域的属性进行绑定,-->
    <input type="text" ng-model="name" /><br>
        {{name}}
        
    <!-- 第2个指令  ng-init 该指令被调用时会初始化内部作用域,这个指令一般会出现在比较小的应用中-->
    <div ng-init="name='zxh'">
        My name is {{name}}
        </div>
    <!-- 第3个指令  ng-app 每一次用AngularJS都离不开这个指令-->
    
    <!-- 第4个指令  $rootScope 声明了ng-app的元素会成为$rootScope的起点，而$rootScope是作用域链的根，
    也就是说根下的作用域都可以访问它，不建议过度使用$rootScope，免得全局变量满天飞，效率又差又难管-->
    {{ someProperty }}
      <!-- 第5个指令 ng-controller必须有一个表达式作为参数，另外通过$scope来继承上级$scope的方法和属性什么的，
      $rootScope也包括在内。-->
      <div ng-controller="AncestorController">
            {{ ancestorName }}
                {{ childName }}
    <div ng-controller="ChildController">
        {{ ancestorName }}
            {{ childName }}
    </div>
</div>
         <!-- 第6个指令 ng-form为什么要用，如果场景再稍微复杂一点点，比如一个父表单中有多个子表单，子表单中有3个验证通过时父表单便可以提交。
但是，<form>是不可以嵌套的。这就得靠ng-form来解决-->
    <form name="mainForm" novalidate>
    <div ng-form="form1">
        姓名:<input type="text" ng-required="true" ng-model="name"/><br>
        证件号码:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>
    </div>
    <br>
    <div ng-form="form2">
        监护人姓名:<input type="text" ng-required="true" ng-model="gname"/><br>
        监护人证件号码:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>
    </div>
    <button ng-disabled="form1.$invalid && form2.$invalid">submit all</button>
</form>
<!-- 第7个指令ng-disabled这种只要出现则生效的属性，我们可以在AngularJS中通过表达式返回值true/false令其生效。-->
    <textarea ng-disabled="1+1==2">1+1=?</textarea>

 <!-- 第8个指令  ng-readonly 通过表达式返回值true/false将表单输入字段设为只读-->    
    <input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/>
.run(function($rootScope,$timeout){
    $rootScope.stopTheWorld=false;
    $timeout(function(){
        $rootScope.stopTheWorld = true;
    },3000)
})


<!-- 第9个指令 ng-checked这个是给<input type="checkbox" />用的，比如。。-->    
        <input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">
        
<!-- 第10个指令ng-selected给<select>里面的<option>用的，比如。。-->    
<label>
    <input type="checkbox" ng-model="isFullStack">
       语言：
</label>
<select>
    <option>英语</option>
    <option>法语</option>
    <option>日语</option>
    <option ng-selected="isFullStack">汉语 !!!</option>
</select>

<!-- 第11个指令 ng-show/ng-hide根据表达式显示/隐藏HTML元素，注意是隐藏，不是从DOM移除，例如:-->    
<div ng-show="1+1 == 2">
    1+1=2
</div>
<div ng-hide="1+1 == 2">
  I'm hiding！
</div>

<!-- 第12个指令    ng-change不是HTML那套onXXX之类的，而是ng-XXX，结合ng-model使用。或者比如ng-options比如。其实这个也是一个指令，
也许觉得和ng-bind差不多，另外，{{}}的performance远不如ng-bind，只是用起来很方便。但页面渲染略慢时可能会被看到。。-->        
<input type="text" ng-model="calc.arg"  ng-change="calc.result = calc.arg*2" />
    <code>{{ calc.result }}</code>
    
<!-- 第13个指令ng-switch单独使用没有什么意思,比如。。-->    
        
<div ng-switch on="2">
    <p ng-switch-default>0</p>
    <p ng-switch-when="1">第一名</p>
    <p ng-switch-when="2">第二名</p>
    <p ng-switch-when="3">第三名</p>
</div>

<!-- 第14个指令ng-repeat总之是遍历集合，给每个元素生成模板实例，每个实例的作用域中可以用一些特殊属性,比如。。-->    
<!--ng-show可以有的值有：
            $index
            $first
            $last
            $middle
            $even
            $odd -->
<ul>
    <li ng-repeat="char in
    [{'alphabet': 'K'},
    {'alphabet': 'A'},
    {'alphabet': 'V'},
    {'alphabet': 'L'},
    {'alphabet': 'E'},
    {'alphabet': 'Z'}] " ng-show="$index">{{char.alphabet}}</li>
</ul>

<!-- 第15个指令ng-href总之是遍历集合，给每个元素生成模板实例，每个实例的作用域中可以用一些特殊属性,比如。。-->    

<div ng-controller="CurTimeController">
    <button ng-click="getCurrentSecond()" >Get Time!</button>
    <p ng-class="{red: x%2==0,blue: x%2!=0}" >Number is: {{ x }}</p>
</div>