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 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
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常用正则表达式集锦
2014/08/17 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
express启用https使用小记
2019/05/21 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python格式化css文件的方法
2015/03/10 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python中bytes和str类型的区别
2019/10/21 Python
详解python中eval函数的作用
2019/10/22 Python
python多进程并发demo实例解析
2019/12/13 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
什么是方法的重载
2013/06/24 面试题
会计应届生的自荐信
2013/12/13 职场文书
更夫岗位责任制
2014/02/11 职场文书
高级编程求职信模板
2014/02/16 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
国窖1573广告词
2014/03/21 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL