本篇主要介绍angular使用指令修改DOM:
使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用.
与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令:
var someModule = angular.module('SomeModule',[]);
someModule.directive('directiveName',function(){
return {
link: function(scope,elements,attrs,controller){
}
}
});
directive传入两个参数:
第一个参数是指令的名字;
第二个参数是一个工厂函数:
函数返回一个对象,对象的link方法的函数有四个参数:
scope:获取外层scope的引用
elements:它所存在的DOM元素
attrs:传递给指令的一个属性数组
controller:DOM元素上的控制器
下面来看个简单的小例子,在html5中,元素有autofocus属性,添加了这个属性的元素,会自动获取焦点.我们可以使用angular来写一个这样的指令:
我们让第二个button在打开的时候就获取焦点,所以按回车就相当于点击了这个按钮:
<!DOCTYPE html> <html ng-app="AutoFocus"> <head> <title>16.1使用指令修改DOM</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> <style type="text/css"> *{ font-family:'MICROSOFT YAHEI'; font-size:12px } </style> </head> <body> <div ng-controller="focus"> <button ng-click="nofocus()">没有焦点</button> <br/> <button myautofocus ng-click="hasfocus()">有焦点</button> <br/> <br/> <span>{{text}}</span> </div> </body> </html>
var autoFocus = angular.module('AutoFocus',[]); autoFocus.controller('focus',function($scope){ $scope.text="没有点击任何按钮"; $scope.nofocus = function(){ $scope.text="没有点击任何按钮"; }; $scope.hasfocus = function(){ $scope.text="点击了有焦点按钮"; }; }); autoFocus.directive('myautofocus',function(){ return { link: function(scope,elements,attrs,controller){ elements[0].focus(); } } });
一.创建模块AutoFocus
二.通过模块的controller方法创建控制器focus
三.通过模块的directive方法创建指令myautofocus
myautofocus的工厂函数就是实现元素自动获取焦点这一功能
效果截图:
打开页面时:
按下回车后:
