指令扩展了HTML的行为。可以创建自定义的HTML元素,属性和特定于应用程序的类与功能。
1.了解指令
指令是AngularJS模板标记和用于支持的JavaScript代码的组合。AngularJS指令标记可以是HTML属性,元素名称,或CSS类。
AngularJS编译器遍历DOM的模板并编译所有的指令。通过指令与作用域结合,产生新的实时视图来链接指令。
2.使用内置指令
- 支持AngularJS功能的指令
- 扩展表单元素的指令
- 把作用域绑定到页面元素的指令
2.1.支持AngularJS功能的指令
ngApp,ngCloak,...
2.2.扩展表单元素的指令
AngularJS很大程度上与表单元素整合。以对应用程序的表单元素提供数据绑定和事件绑定。
<a href="" ng-click="handleClick()">Click Me</a>
<ng-form name="myForm">
<input type="text" ng-model="myName" required>
</ng-form>
实现一个用于表单指令的控制器
var myModel=angular.module('myApp', []);
myModel.controller('myController',function($scope){
$scope.cameras=[
{make:'Canon',model:'70D',mp:20.2},
{make:'Canon',model:'70D',mp:20},
{make:'Nikon',model:'D7100',mp:24.1},
{make:'Nikon',model:'D5200',mp:24.1}
];
$scope.cameraObj=$scope.cameras[0];
$scope.cameraName='Camon';
$scope.cbValue='';
$scope.someText='';
});