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 相关文章推荐
使用jquery实现div的tab切换实例代码
May 27 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
vue组件与复用详解
2018/04/08 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python Pygame的具体使用讲解
2017/11/03 Python
python 剪切移动文件的实现代码
2018/08/02 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
Python字典的核心底层原理讲解
2019/01/24 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
几个判断型的面试题
2012/07/03 面试题
2013年高中生自我评价
2013/10/23 职场文书
2014年团支部工作总结
2014/11/17 职场文书
安全员岗位职责范本
2015/04/11 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript