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实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
js倒计时抢购实例
Dec 20 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
redux-saga 初识和使用
Mar 10 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
Moment的feature导致线上bug解决分析
Sep 23 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
提问的智慧(2)
2006/10/09 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Python设计模式之观察者模式实例
2014/04/26 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python中open函数的基本用法示例
2019/09/07 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
一道输出判断型Java面试题
2014/10/01 面试题
企业厂长岗位职责
2013/12/17 职场文书
项目建议书格式
2014/03/12 职场文书
普通话宣传标语
2014/06/26 职场文书
我的中国心演讲稿
2014/09/04 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
长江七号观后感
2015/06/11 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫