AngularJS 自定義指令詳解及示例代碼
自定義指令中使用AngularJS擴(kuò)展HTML的功能。自定義指令使用的“指令”的功能定義。自定義指令只是替換了它被激活的元素。引導(dǎo)過(guò)程中AngularJS應(yīng)用程序找到了匹配的元素,并做好使用自定義指令compile()方法一次活動(dòng)再處理使用基于指令的范圍自定義指令link()方法的元素。 AngularJS提供支持,以下列元素的類型來(lái)創(chuàng)建自定義指令。
Element directives - 指令遇到時(shí)激活一個(gè)匹配的元素。
Attribute - - 指令遇到時(shí)激活一個(gè)匹配的屬性。
CSS - - 指令遇到時(shí)激活匹配CSS樣式。
Comment - - 指令遇到時(shí)激活匹配的注釋。
了解自定義指令
定義自定義的HTML標(biāo)簽。
<student name="Mahesh"></student><br/>
<student name="Piyush"></student>
定義自定義指令來(lái)處理上面的自定義HTML標(biāo)簽。
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>
結(jié)果
在Web瀏覽器中打開textAngularJS.html??吹浇Y(jié)果如下:
以上就是對(duì)AngularJS的自定義指令資料整理,后續(xù)繼續(xù)補(bǔ)充,謝謝大家對(duì)本站的支持!
- 深入講解AngularJS中的自定義指令的使用
- AngularJS創(chuàng)建自定義指令的方法詳解
- AngularJS優(yōu)雅的自定義指令
- AngularJS使用自定義指令替代ng-repeat的方法
- AngularJS 自定義指令詳解及實(shí)例代碼
- AngularJS自定義指令實(shí)現(xiàn)面包屑功能完整實(shí)例
- AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
- AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法
- AngularJS自定義指令詳解(有分頁(yè)插件代碼)
- 詳解angularJS自定義指令間的相互交互
- AngularJS實(shí)現(xiàn)自定義指令及指令配置項(xiàng)的方法
相關(guān)文章
AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼
本篇文章主要介紹了AngularJS動(dòng)態(tài)綁定ng-options的ng-model實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06angular4響應(yīng)式表單與校驗(yàn)實(shí)現(xiàn)demo
這篇文章主要介紹了angular4響應(yīng)式表單與校驗(yàn)實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例
這篇文章給大家分享了AngularJS循環(huán)實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能,對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,有需要的朋友可以看看。2016-09-09說(shuō)說(shuō)AngularJS中的$parse和$eval的用法
本篇文章主要介紹了說(shuō)說(shuō)AngularJS中的$parse和$eval的用法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09Angular 4.x中表單Reactive Forms詳解
這篇文章主要介紹了Angular 4.x中表單Reactive Forms的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),相信對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-04-04angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了angular和BootStrap3實(shí)現(xiàn)購(gòu)物車功能的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01