要注意的是不要把自己开发的指令以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 = { '200px', height:'200px', background:'red' } }) </script> </body>