ng-init:初始化。初始化操作，这里用一段代码解释一下吧，代码如下:
<div ng-init="city='上海'"> <p>{{city}}</p></div>这里的ng-init=”city=’上海’”;相当于给controller中的$scope.city=”上海”;这样的一个初始化效果。通过指令我们可以在html元素中做初始化，而不是在javascript代码中初始化。
ng-bind:数据绑定。相当于{{}}的效果同样的我们用代码解释下吧,代码如下:
<div ng-init="name='张三'"> <p ng-bind="name"></p></div>这里的ng-bind=”name”相当于{{name}}，所以说ng-bind效果相当于{{}}。
ng-repeat:循环输出指令。通过这个指令我们可以循环添加dom元素，来看看代码是如何实现的吧。
<div ng-init="cityArr=['北京','上海','广州','深圳']"> <ul> <li ng-repeat="city in cityArr" ng-bind="city"></li> </ul></div>这里ng-init初始化了一个cityArr数组，通过ng-repeat指令循环遍历了这个数组，city in cityArr中，cityArr是数组，city是cityArr中的每一个元素，然后通过ng-bind指令把每个元素的数据绑定到li中。显示结果这里不上图了，可以复制代码测试效果。
ng-include:导入其他html文件。类似于jQuery的load,但是ng-include有以下的特点: ng-include指定纯地址时这个地址要加单引号。ng-include加载外部html时，script标签中的代码不执行，不能加载。ng-include加载外部html时，可以style标签的内容,line标签可以识别。我们来看看如何使用ng-include吧，代码如下:
<div ng-include="'shoppingCar.html'"></div>如上代码shoppingCar.html是添加了单引号的，是一个html。用法和jQuery的load用法差不多。
从上边这些事件指令可以看出，就是在js的事件前面添加了ng。那我们要如何使用事件指令呢？ 用法如下代码:
<body ng-app="eapp"> <div ng-controller="econtroller"> <button ng-click="change()">提示</button> </div> <script> var eapp=angular.module("eapp",[]); eapp.controller("econtroller",function ($scope) { $scope.change=function () { alert("您点击了按钮"); } }); </script></body>如上面的代码，我们用事件指令时直接引用一个function就行，但是前提是这个function必须是属于你当前的controller，所以如上的change一样，是属于econtroller。
那使用事件指令时我们怎么获取event事件对象呢?把上边的代码稍微更改一下，代码如下:
<body ng-app="eapp"> <div ng-controller="econtroller"> <button ng-click="change($event)">提示</button> </div> <script> var eapp=angular.module("eapp",[]); eapp.controller("econtroller",function ($scope) { $scope.change=function (event) { console.log(event); alert("您点击了按钮"); } }); </script></body>在事件指令使用时往function中传参$event，这样就能使用event事件对象了。其他事件指令用法也差不多，这里就不多介绍了。
还有很多指令，这里就介绍这么多把。我们来看看各个指令的用法:
ng-style (添加css样式) 代码如下
<body ng-app="napp"> <div ng-controller="ncontroller"> <div ng-style="mystyle">呵呵</div> </div> <script> var napp=angular.module("napp",[]); napp.controller("ncontroller",function ($scope) { $scope.mystyle={ "color":"blue", "background-color":"red" }; }); </script></body>ng-style的参数mystyle是一个写着css样式的js对象，这是ng-style的用法。
ng-class (添加class) 代码如下:
<style> .font_color{ color: red; background-color: blue; }</style> <div ng-controller="ncontroller"> <div ng-class="{font_color:true}">hello angular</div></div>ng-class通过{}引用class以{font_color:ture}的形式添加class，”:”后的true表示是否引用这个样式，是一个boolean值，如果是true则引用该class，反之则不用这个class。
ng-class-even (偶数时添加class),ng-class-odd (奇数时添加class) 代码如下
<style> /*样式代码*/ .blue{ color: red; background-color: dodgerblue; } .red{ color: blue; background-color: red; }</style><body ng-app="napp"> <div ng-controller="ncontroller"> <ul> <!--ng-class-even，ng-class-odd经常和ng-repeat一起使用--> <li ng-repeat="city in cityArr" ng-class-even="{red:true}" ng-class-odd="{blue:true}" >{{city}}</li> </ul> </div> <script> var napp=angular.module("napp",[]); napp.controller("ncontroller",function ($scope) { $scope.cityArr=["北京","上海","广州","深圳"]; }); </script></body>代码如上，ng-class-even,ng-class-odd的用法和ng-class类似。这两个指令经常和ng-repeat一起使用，当为偶数时使用ng-class-even的class，当为奇数时使用ng-class-odd的class。
ng-show,ng-hide,ng-if(隐藏或者显示)，代码如下:
<body ng-app="napp"> <div ng-controller="ncontroller"> <span ng-show="isShow">Hello Angular</span> <button ng-click="show()">{{change}}</button> </div> <script> var napp=angular.module("napp",[]); napp.controller("ncontroller",function ($scope) { $scope.isShow=true; $scope.change="隐藏"; $scope.show=function () { if($scope.isShow){ $scope.isShow=false; $scope.change="显示"; }else{ $scope.isShow=true; $scope.change="隐藏"; } } }); </script></body>通过点击事件来控制显示和隐藏，这三个的用法差不多，我这里只写ng-show了。后面的参数是一个boolean类型的值，ng-show当参数的值为true是这个元素显示，当ng-show参数为false时这个元素隐藏。剩下的ng-hide和ng-if可以按照上面这里例子写，用法相同。
ng-switch 与流程控制的switch的用法相同
<body ng-app="napp"> <div ng-controller="ncontroller"> <div ng-switch="mypage"> <div ng-switch-when="taobao">淘宝网</div> <div ng-switch-when="baidu">百度一下</div> </div> <button ng-click="change()">切换</button> </div> <script> var napp=angular.module("napp",[]); napp.controller("ncontroller",function ($scope) { $scope.mypage="taobao"; $scope.change=function () { if($scope.mypage==="taobao"){ $scope.mypage="baidu"; }else{ $scope.mypage="taobao"; } } }); </script></body>代码如上，
ng-switch=”mypage”,对mypage这个变量进行筛选ng-switch-when的参数表示的是变量某个具体的值通过点击事件切换mypage变量的值3. 当mypage的变量改变时，angular自动触发脏检查，switch的内容也随之改变，当切换到”taobao”时显示的是”淘宝网”,当切换到”baidu”时显示的是”百度一下”。Angular的内置指令就介绍这么多了，有什么不足和错误希望补充与指出!
新闻热点
疑难解答
