详解AngularJS中自定义指令的使用


Posted in Javascript onJune 17, 2015

 自定义指令中使用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中自定义指令的使用

Javascript 相关文章推荐
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
js Calender控件使用详解
Jan 05 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
js中如何完美的解析数据
Mar 18 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
vue实现路由切换改变title功能
May 28 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
详解AngularJS中的依赖注入机制
Jun 17 #Javascript
详解AngularJS中的作用域
Jun 17 #Javascript
简介AngularJS中使用factory和service的方法
Jun 17 #Javascript
简介AngularJS的视图功能应用
Jun 17 #Javascript
在AngularJS中使用AJAX的方法
Jun 17 #Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 #Javascript
AngularJS的表单使用详解
Jun 17 #Javascript
You might like
PHP empty函数报错解决办法
2014/03/06 PHP
浅谈php和.net的区别
2014/09/28 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
js自定义事件代码说明
2011/01/31 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
python实现自动重启本程序的方法
2015/07/09 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
python文件路径操作方法总结
2020/12/21 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL