详解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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
jQuery使用手册之三 CSS操作
Mar 24 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
实例浅析js的this
Dec 11 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
微信小程序如何获取用户收货地址
Nov 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
FCKeditor的安装(PHP)
2007/01/13 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php模板引擎技术简单实现
2016/03/15 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
python实现文件路径和url相互转换的方法
2015/07/06 Python
在Django中创建动态视图的教程
2015/07/15 Python
python 调用HBase的简单实例
2016/12/18 Python
python连接mongodb密码认证实例
2018/10/16 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
如何写一份好的自荐信
2014/01/02 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
珠宝店促销方案
2014/03/21 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
纪检监察立案决定书
2015/06/24 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python
python可视化之颜色映射详解
2021/09/15 Python