求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Model Center   Code  
会员   
 
 
     
   
    全部     工程实例     标准规范     名校讲义     知识库    
 
 

AngularJS教程
AngularJS快速入门
AngularJS环境设置
AngularJS MVC体系结构
AngularJS第一个应用程序
AngularJS指令
AngularJS表达式
AngularJS控制器
AngularJS过滤器
AngularJS表格
AngularJS HTML DOM
AngularJS模块
AngularJS表单
AngularJS包括
AngularJS Ajax
AngularJS视
AngularJS作用域
AngularJS服务
AngularJS依赖注入
AngularJS自定义指令
AngularJS国际化
 
 

AngularJS自定义指令

    您可以捐助,支持我们的公益事业。

金额: 1元 10元 50元

姓名:

邮件:

电话:

公司:

说明:

认证码: 验证码,看不清楚?请点击刷新验证码 必填



 
 捐助

自定义指令中使用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。看到结果如下:


    您可以捐助,支持我们的公益事业。

金额: 1元 10元 50元

姓名:

邮件:

电话:

公司:

说明:

认证码: 验证码,看不清楚?请点击刷新验证码 必填



 
 捐助