一、基础ng指令
1.ng-disable,使用ng-disabled可以把disabled属性绑定到以下表单输入字段上:
<input> ;
<textarea>;
<select>;
<button>
普通HTML,在以下表单控件中只要出现了disable属性就会禁用该控件,而使用ng-disable时只有当属性值为true时才会禁用绑定的控件。
2.与ng-disable类似的还有ng-checked、ng-readonly、ng-selected。
3.ng-href,动态创建url时,应该使用ng-href来代替普通HTML的href,避免动态生成链接时url对应的值未生成而造成404,使用ng-href时,angularJS会等待url对应的值生成后执行响应。
4.与ng-href类似的还有ng-src,用于图片等资源的加载时,先判断资源表达式是否生效才加载对应资源。
二、在指令中使用子作用域
1.ng-app,任何具有ng-app属性的DOM元素将会属于$rootScope作用域中,嵌套在ng-app中的指令都会继续它。
2.ng-controller,为嵌套在其中的指令创建一个新的作用域,避免将所有的操作都定义在$rootScope中。
3.ng-include,加载、编译并包含外部的HTML片断到当前应用中,使用ng-include需要考虑跨域资源共享(Cross-Origin Resoure Sharing,CORS)以及同源原则(Same Origin Policy),以保证引入内容能正常加载。
4. ng-switch ,和ng-switch-when、on=”propertyName”一起使用,示例:
<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>
5.ng-if,根据表达式的值生成或移除DOM元素,ng-if和ng-show、ng-hide指令本质区别是它不是通过css来隐藏或显示元素,而是真正的生成和移除节点,移除时会将其作用域及css之类属性也同时移除。
6.ng-repeate,用于迭代一个集合或为集合中每个元素生成一个模板实例。
$index:遍历的进度(0...length-1)。
$first:当元素是遍历的第一个时值为true。
$middle:当元素处于第一个和最后元素之间时值为true。
$last:当元素是遍历的最后一个时值为true。
$even:当$index值是偶数时值为true。
$odd:当$index值是奇数时值为true。
7.{{}},angularJS内置语法,在内部 scope与视图之间绑定,当 scope发生变化时与之对应的视图也随之变化。
8.ng-bind,该指令用于避免(Flash Unrendered Content,FOUC), 因为内置{{}}语法的元素不会立即进行渲染,因此,使用ng-bind将内容与元素绑定在一起,内容会被 当作子文本节点渲染到含有ng-bind指令的元素内。
<body ng-init="greeting='HelloWorld'">
<p ng-bind="greeting"></p>
</body>
9.与ng-bind类似的还是ng-cloak指令,ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来。
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>
10.ng-bind-template,用于绑定多个表达式。
<div ng-bind-template="{{message}}{{name}}">
</div>
11.ng-model 指令用来将input、select、text area或自定义表单控件同包含它们的作用域中 的属性进行绑定。它可以提供并处理表单验证功能,在元素上设置相关的CSS类(ng-valid、 ng-invalid等),并负责在父表单中注册控件。
我们应该始终用ngModel来绑定
scope上一个数据模型内的属性,而不是
scope上的属性, 这可以避免在作用域或后代作用域中发生属性覆盖。
例如:
<input type="text" ng-model="modelName.someProperty" />
12.ng-change,这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入,这个指令要 和ngModel联合起来使用。
<div ng-controller="EquationController">
<input type="text" ng-model="equation.x" ng-change="change()" />
<code>{{ equation.output }}</code>
</div>
angular.module('myApp',[]) .controller('EquationController',function($scope) {
$scope.equation = {};
$scope.change = function() {
$scope.equation.output = parseInt($scope.equation.x) + 2;
};
});
13.ng-attr-(suffix),当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会 被自动注册到 watch服务中并更新到 digest循环中,成为它的一部分,有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子:
<svg>
<circle cx="{{ cx }}"></circle>
</svg>
运行上面的代码会抛出一个错误,指出我们有一个非法属性。可以用ng-attr-cx来解决这 个问题。注意,cx位于这个名称的尾部。在这个属性中,通过用{{ }}来写表达式,达到前面提 到的目的。
<svg>
<circle ng-attr-cx="{{ cx }}"><circle>
</svg>