基础ng指令
- ng-href
- ng-src
- ng-disabled
- ng-readonly
- ng-checked
- ng-selected
- ng-class
- ng-style
- ng-show
- ng-hide
- ng-repeat
- ng-init
- ng-if
- ng-bind
- ng-bind-template
- ng-cloak
- ng-model
- ng-click
- ng-change
- ng-submit
- ng-include
内置指令说明
a.ng-href 使用说明: 当使用当前作用域中的属性动态创建URL时,应该用ng-href代替href。 解决潜在问题当用户点击一个由插值动态生成的链接时,如果插值尚未生效,将会跳转 到错误的页面(通常是404)b.ng-src 使用说明: angularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像c.ng-disabled 使用说明: 使用ng-disabled可以把disabled属性绑定到以下表单输入字段上: (text、checkbox、radio、number、url, email、submit) d.ng-readonly 使用说明: 通过ng-readonly可以将某个返回真或假的表达式同是否出现readonly属性进行绑定 e.ng-checked 使用说明: 通过ng-checked可以将某个返回真或假的表达式同是否出现checked属性进行绑定 f.ng-selected 使用说明: ng-selected可以对是否出现option标签的selected属性进行绑定 g.ng-class 使用说明: ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。 当表达式发生变化,先前添加的类会被移除,新类会被添加 h.ng-style 使用说明: ng-style帮你轻松控制你的css属性 $scope.style = {color:'red',cursor:'pointer'};i.ng-show/ng-hide 使用说明: ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。 类似地,当赋值给ng-hide指令的值为true时元素也会被隐藏 j.ng-repeat 使用说明: ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素 都会被赋予自己的模板和作用域。 同时每个模板实例的作用域中都会暴露一些特殊的属性 $index:遍历的进度(0...length-1) $first:当元素是遍历的第一个时值为true $middle:当元素处于第一个和最后元素之间时值为true $last:当元素是遍历的最后一个时值为true $even:当$index值是偶数时值为true $odd:当$index值是奇数时值为true 下面的例子展示了如何用$odd和$even来制作相间的列表，JavaScript中数组 的索引从0开始, 因此我们用!$even和!$odd来将$even和$odd的布尔值反转：
- { {person.name}} lives in { {person.city}}
k.ng-init 使用说明: ng-init指令用来在指令被调用时设置内部作用域的初始状态{ {greeting}} { {person}}l.ng-if 使用说明: ng-if指令用来根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if 的表达式的值是false,那对应的元素将会从DOM中移除, 否则对应元素的一个克隆将被重新插入DOM我将不会出现你可以看到我m.ng-bind 使用说明: 尽管可以在视图中使用{ { }}模板语法(angularJS内置的方式),我们也可以通过ng-bind 指令实现同样的行为; HTML加载含有{ { }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁,我可以用ng-bind将内容同元素绑定在一起避免未渲染内容闪烁, 内容会被当作子文本节点渲染到含有ng-bind指令的元素内我将不会出现你可以看到我n.ng-bind-template 使用说明: 同ng-bind指令类似,ng-bind-template用来在视图中绑定多个表达式 o.ng-cloak 使用说明: 除使用ng-bind来避免未渲染元素闪烁,还可以在含有{ { }}的元素上使用ng-cloak指令{
{ greeting }} p.ng-model 使用说明: ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中 的属性进行绑定 q.ng-click 使用说明: ng-click指令用来指定一个元素被点击时调用的方法或表达式
count: { { count }}angular.module('freefedApp',[]).controller('counterCtrl',['$scope', function($scope) { $scope.decrement = function() { $scope.count = $scope.count - 1; }; }])；
r.ng-change 使用说明: ng-change指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要 和ngModel联合起来使用
angular.module('freefedApp',[]) .controller('equationCtrl',['$scope',function($scope) { $scope.equation = {}; $scope.change = function() { $scope.equation.output = parseInt($scope.equation.x) + 2; }; ]});{ { equation.output }}
s.ng-submit 使用说明: ng-model指令用来将表达式同onsubmit事件进行绑定
angular.module('freefedApp',[]).controller('formCtrl',['$scope',function($scope) { $scope.person = { name: null }; $scope.people = []; $scope.submit = function() { if( $scope.name ){ } }; ]});
t.ng-include 使用说明: ng-include指令可以加载、编译并包含外部html片段到当前应用中来
user.html 姓名： { {user.name}} 年龄: { {user.age}} angular.module('freefedApp',[]).controller('userCtrl',['$scope',function($scope) { $scope.user = { name: 'zhangzhen', age : '26' }; ]});