Angular内置指令（二）
目录：
$rootScope，ng-app，.run()，ng-include，ng-repeat，ng-if，ng-switch，ng-init
ng-show/ng-hide，ng-model，ng-bind-template，ng-change，ng-submit，ng-cloak，ng-bind
详细介绍：
$rootScope
是作用域链的起始点，任何嵌套在ng-app内的指令都会继承$rootScope
ng-app
任何具有ng-app属性的dom元素都将被标记为$rootScope的起始点
.run()
.run()可以通过此方法来访问/设置$rootScope
ng-include
把外部的html片段包含到当前元素里作为当前元素的子元素。还可以规定作用域，写法看下面代码，注意外部文件地址的引号的写法，跨域的文件不可以引入哦
<body> <!--注意外部文件地址的引号--> <div ng-include="'htmlhtml.html'" ng-controller="myController" ng-init="name='world'" > </div> <script> angular.module("myApp",[]) .controller("myController",function($scope){ }) </script> </body>
ng-repeat
用来遍历数组或者对象。
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../Angular/angular.min.js"></script> <style> .odd{ background:greenyellow; } .even{ background:grey; } </style> </head> <body> <div ng-controller="myController"> <table width="100%"border="0"> <!-- 注意添加class的两个引号--> <tr ng-repeat="v in objData" ng-class-even="'even'" ng-class-odd="'odd'"> <td>{{v.name}}</td> <td>{{v.age}}</td> <td>{{v.score}}</td> </tr> </table> <ul> <!-- 被遍历的数组有重复元素，是不会被遍历出来的，下面的写法是根据下标遍历数组，所以重复的就会被遍历出来--> <li ng-repeat="v in arr track by $index">{{v}}</li> </ul> </div> <script> angular.module("myApp",[]) .controller("myController",function($scope){ $scope.objData = [ {name:'小梦',age:'19',score:'104'}, {name:'北京',age:'20',score:'103'}, {name:'山西',age:'12',score:'102'}, {name:'天安门',age:'21',score:'101'} ]; $scope.arr = [1,3,2,1,1,2,3,4] }) </script> </body> </html>
ng-if
可以完全根据表达式返回的布尔值在dom中生成或移除一个元素，false移除，true生成。移除的时候不管对该元素做过什么设置，当再次生成的时候这些设置都不在了，就像恢复了出厂设置一样。
<body> <!--这个div会被移除--> <div ng-if="2+2 == 5"> 我是给ng-if返回false的div </div> <div ng-if="2+2 == 4"> 我是给ng-if返回true的div </div> <script> angular.module("myApp",[]) </script> </body>
ng-switch
ng-switch ng-switch-when ng-switch-default就像switch语句一样使用
<body> <div> <input type="text" ng-model="person.name"/> <!-- on 就好像是switch语句的参数一样 而ng-switch-when 就像是 case一样 --> <div ng-switch on="person.name"> <p ng-switch-default>default</p> <p ng-switch-when="Air">{{person.name}}</p> </div> </div> <script> angular.module("myApp",[]) </script>
ng-init
设置内部作用域的初始值。
<body> <div ng-init="name='大厨的笔记';age='25'"> <p>{{name}}{{age}}岁啦</p> </div> <script> angular.module("myApp",[]) </script> </body>
ng-show/ng-hide
根据条件返回的布尔值 显示或隐藏元素
<body> <div ng-show="2+2 == 4"> 第一个div 2+2 == 4 ng-show </div> <div ng-hide="2+2 == 4"> 第二个div 2+2 == 4 ng-hide </div> <script> angular.module("myApp",[]) </script>
ng-model
用来将input select textarea 或自定义表单控件同包含它们的作用域中的属性进行绑定
<body> <!--双向数据绑定，视图与控制器的数据保持一致--> <div ng-controller="myController"> <input type="text" ng-model="data"/> <p>{{data}}</p> </div> <script> angular.module("myApp",[]) .controller("myController",function($scope){ $scope.data = 1; }) </script>
ng-change
在表单输入发生变化时触发。要配合ng-model使用
<body> <div ng-controller="myController"> <input type="text" ng-model="data.mo" ng-change="change()"/> <p>{{data.child}}</p> </div> <script> angular.module("myApp",[]) .controller("myController",function($scope){ $scope.data = {}; $scope.change = function(){ $scope.data.child = parseInt($scope.data.mo)+2; } }) </script> </body>
ng-submit
用来将表达式同onsubmit事件进行绑定，这个指令会阻止默认发送请求，前提是form没有action属性
ng-bind
在使用 {{ }} 绑定数据时在数据没有加载出来时会发生闪烁的现象，使用ng-bind来绑定数据不会出现闪烁的问题
<!--这样不会有闪烁的现象--> <div ng-controller="myController"> <div ng-bind="data"></div> </div> <script> angular.module("myApp",[]) .controller("myController",function($scope){ $scope.data = '大厨的笔记'; }) </script>
ng-cloak
除了用ng-bind来解决闪烁问题外，还可以用ng-cloak来解决，它会将内部元素隐藏，直到数据出来后才显示内部元素
<body> <div ng-controller="myController"> <p ng-cloak>{{data}}</p> </div> <script> angular.module("myApp",[]) .controller("myController",function($scope){ $scope.data = '大厨的笔记'; }) </script> </body>
ng-bind-template
同ng-bind指令类似，用来在视图中绑定多个表达式
<body> <!--貌似这种写法在个别编辑器里会报错，但是不影响数据渲染--> <div ng-controller="myController"> <p ng-bind-template="{{data1}}{{data2}}"></p> </div> <script> angular.module("myApp",[]) .controller("myController",function($scope){ $scope.data1 = '大厨的笔记1'; $scope.data2 = '大厨的笔记2'; }) </script> </body>
