要注意的是不要把自己开发的指令以ng开头，以免与内置指令冲突
目录：ng-disabled，ng-readonly，ng-checked，ng-selected，ng-href，ng-src，ng-class，ng-style
ng-disabled
当它的值返回true时表示禁用当前元素，返回false时什么都不做
<body>
<!--在文本框输入内容时禁用按钮-->
<input type="text" ng-model="name"/>
<button ng-disabled="!name">disabled</button> <!--3秒后input框变为可用状态-->
<div ng-controller="myController">
<input type="text" ng-disabled="trueFalse"/>
</div> <!-- ng-readonly --><!-- true只读，false正常使用 -->
<input type="text" ng-readonly="true"/> <script>
angular.module("myApp",[])
.controller("myController",function($scope,$timeout){
$scope.trueFalse = true;
$timeout(function(){
$scope.trueFalse = false;
},3000) })
</script>
</body>
ng-readonly
同ng-disabled一样的用法，这个指令是设置是否只读
ng-checked
同ng-disabled一样的用法，true选中，false不选中
ng-selected
同样是true选中，false不选中
ng-href
如果用a链接的href的话,给页面绑定的数据没有过来的时候点击文本会刷新本页面，如果用ng-href的话，数据没有过来的时候链接是不可以点击的
<body>
<!--延迟两秒给页面输送数据，如果用a链接的href的话数据没有过来的时候点击文本会刷新本页面，
如果用ng-href的话，数据没有过来的时候链接是不可以点击的-->
<div ng-controller="myController">
<a ng-href="{{ myHref }}">myhref</a>
</div> <script>
angular.module("myApp",[])
.controller("myController",function($scope,$timeout){
$timeout(function(){
$scope.myHref = 'http://www.baidu.com';
},2000)
})
</script>
</body>
ng-src
同a链接的href是一个道理，ng-src在数据还没有过来的时候是不会加载图片的，src在数据没有加载过来的时候会报错
ng-class ng-class-odd ng-class-even
根据表达式条件返回的布尔值添加对应的class名。可以添加多个class，每个用逗号隔开ng-class-odd ng-class-even 表示奇数行和偶数行的样式
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../Angular/angular.min.js"></script>
<style>
.classRed{
background:red;
}
.classGreen{
background:green;
}
</style>
</head>
<body>
<div>
<!-- 条件返回true 表示添加 条件返回false表示不添加。可以添加多个表达式来判断添加某个class样式-->
<p ng-class="{classRed:1+1 == 3,classGreen:1+1 ==2}">ddd</p>
</div>
<div ng-controller="myController">
<!-- 还可以指定奇数和偶数行的样式，注意引号的写法-->
<ul>
<li ng-repeat="v in arr" ng-class-even="'classRed'" ng-class-odd="'classGreen'">{{v}}</li>
</ul>
</div>
<script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.arr = [1,2,3,4,5,6,7,8,9,0];
});
</script>
</body>
</html>
ng-style
使用angular添加样式，以 key:value 的形式
<body>
<!--以键值对的形式给元素指定样式-->
<div ng-controller="myController">
<p ng-style="objCss"></p>
</div>
<script>
angular.module("myApp",[])
.controller("myController",function($scope){
$scope.objCss = {
width:'200px',
height:'200px',
background:'red'
}
})
</script>
</body>