<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1"> <div my-Timer></div> <br/> <my-Timer></my-Timer> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为ngTouch var app01 = angular.module("app01", []); //在模块app01上定义curentTime指令 app01.directive("myTimer",function(){ return { template:"<span>"+new Date().toLocaleString()+"</span>", //模板 restrict:"AE", //可应用范围 replace:true //是否替换 }; }); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { }); </script> </body> </html>
运行结果：
因为使用了replace属性，所以div标签被替换了，另外restrict指定为AE则标签可以作为元素与属性使用。
3.5.2、自定义时钟
上个自定义指定很简单，我将上一个指令修改为可以动态变化的时间及可以给时钟指定参数与事件。
示例代码：
<!DOCTYPE html> <!--指定angular管理的范围--> <html ng-app="app01"> <head> <meta charset="UTF-8"> <title>指令</title> </head> <body> <!--指定控制器的作用范围--> <form ng-controller="Controller1"> <my-Timer color="blue" passed="0" interval="1000"></my-Timer> </form> <!--引入angularjs框架--> <script src="https://www.jb51.net/js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //定义模块，指定依赖项为ngTouch var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象 app01.controller("Controller1", function($scope) { }); //在模块app01上定义curentTime指令 app01.directive("myTimer",function(){ return { template:"<span></span>", //模板 restrict:"AE", //可应用范围 replace:true, //是否替换 scope:{ color:'@' }, link:function(scope,elem,attr,controller){ var i=attr.interval||1000; elem.text(new Date().toLocaleString()+" 已计时："+attr.passed+"秒"); //向元素中设置文本为当前时间 //定时器，每隔指定的时间调用函数 setInterval(function(){ attr.passed=parseInt(attr.passed)+parseInt(i/1000); elem.text(new Date().toLocaleString()+" 已计时："+attr.passed+"秒"); //向元素中设置文本为当前时间 },i); } }; }); </script> </body> </html>
运行结果：
四、示例下载
github仓库：https://github.com/zhangguo5/Angular02.git
以上所述是小编给大家介绍的AngularJS验证、过滤器、指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: