详解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提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
3种js实现string的substring方法
Nov 09 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
js实现移动端图片滑块验证功能
Sep 29 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获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
javascript关于继承解析
2016/05/10 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
基于Vue实现拖拽功能
2020/07/29 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python简单生成随机数的方法示例
2018/03/31 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
JPA的特点
2014/10/25 面试题
环境工程专业自荐信
2014/03/03 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL