AngularJS 自定义指令详解及示例代码


Posted in Javascript onAugust 17, 2016

自定义指令中使用AngularJS扩展HTML的功能。自定义指令使用的“指令”的功能定义。自定义指令只是替换了它被激活的元素。引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素。 AngularJS提供支持,以下列元素的类型来创建自定义指令。

Element directives - 指令遇到时激活一个匹配的元素。

Attribute - - 指令遇到时激活一个匹配的属性。

CSS - - 指令遇到时激活匹配CSS样式。

Comment - - 指令遇到时激活匹配的注释。

了解自定义指令

定义自定义的HTML标签。

<student name="Mahesh"></student><br/>
<student name="Piyush"></student>

定义自定义指令来处理上面的自定义HTML标签。

var mainApp = angular.module("mainApp", []);

//Create a directive, first parameter is the html element to be attached.	 
//We are attaching student html tag. 
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
 //define the directive object
 var directive = {};
 //restrict = E, signifies that directive is Element directive
 directive.restrict = 'E';
 //template replaces the complete element with its text. 
 directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
 //scope is used to distinguish each student element based on criteria.
 directive.scope = {
  student : "=name"
 }
 //compile is called during application initialization. AngularJS calls it once when html page is loaded.
 directive.compile = function(element, attributes) {
  element.css("border", "1px solid #cccccc");
	 //linkFunction is linked with each element with scope to get the element specific data.
  var linkFunction = function($scope, element, attributes) {
   element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
   element.css("background-color", "#ff00ff");
  }
  return linkFunction;
 }
 return directive;
});

定义控制器以更新范围为指令。在这里,我们使用name属性值作为子的作用域。

mainApp.controller('StudentController', function($scope) {
  $scope.Mahesh = {};
  $scope.Mahesh.name = "Mahesh Parashar";
  $scope.Mahesh.rollno = 1;

  $scope.Piyush = {};
  $scope.Piyush.name = "Piyush Parashar";
  $scope.Piyush.rollno = 2;
});

例子

<html>
<head>
 <title>Angular JS Custom Directives</title>
</head>
<body>
 <h2>AngularJS Sample Application</h2>
 <div ng-app="mainApp" ng-controller="StudentController">
		<student name="Mahesh"></student><br/>
		<student name="Piyush"></student>
 </div>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
 <script>
  var mainApp = angular.module("mainApp", []);
	 
  mainApp.directive('student', function() {
   var directive = {};
   directive.restrict = 'E';
   directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
   
   directive.scope = {
   student : "=name"
   }
		 
   directive.compile = function(element, attributes) {
   element.css("border", "1px solid #cccccc");

   var linkFunction = function($scope, element, attributes) {
    element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
    element.css("background-color", "#ff00ff");
   }

   return linkFunction;
   }

   return directive;
  });
	 
  mainApp.controller('StudentController', function($scope) {
   $scope.Mahesh = {};
   $scope.Mahesh.name = "Mahesh Parashar";
   $scope.Mahesh.rollno = 1;

   $scope.Piyush = {};
   $scope.Piyush.name = "Piyush Parashar";
   $scope.Piyush.rollno = 2;
  });
  
 </script>
</body>
</html>

结果

在Web浏览器中打开textAngularJS.html。看到结果如下:

AngularJS 自定义指令详解及示例代码

以上就是对AngularJS的自定义指令资料整理,后续继续补充,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS字符串函数扩展代码
Sep 13 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
javascript时间差插件分享
Jul 18 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
AngularJS 依赖注入详解及示例代码
Aug 17 #Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 #Javascript
深入理解jQuery layui分页控件的使用
Aug 17 #Javascript
AngularJS 作用域详解及示例代码
Aug 17 #Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 #Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 #Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
英文自我鉴定
2013/12/10 职场文书
幼儿教师工作感言
2014/02/14 职场文书
法律六进活动方案
2014/03/13 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
抗洪救灾标语
2014/10/08 职场文书
基石观后感
2015/06/12 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis