本篇主要介绍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的工厂函数就是实现元素自动获取焦点这一功能
效果截图:
打开页面时:
按下回车后:
