7.在AngularJS视图中实现指令

指令扩展了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='';
});