AngularJS實(shí)現(xiàn)自定義指令及指令配置項(xiàng)的方法
本文實(shí)例講述了AngularJS實(shí)現(xiàn)自定義指令及指令配置項(xiàng)的方法。分享給大家供大家參考,具體如下:
AngularJS自定義指令有兩種寫法:
//第一種
angular.module('MyApp',[])
.directive('zl1',zl1)
.controller('con1',['$scope',func1]);
function zl1(){
var directive={
restrict:'AEC',
template:'this is the it-first directive',
};
return directive;
};
function func1($scope){
$scope.name="alice";
}
//第二種
angular.module('myApp',[]).directive('zl1',[ function(){
return {
restrict:'AE',
template:'thirective',
link:function($scope,elm,attr,controller){
console.log("這是link");
},
controller:function($scope,$element,$attrs){
console.log("這是con");
}
};
}]).controller('Con1',['$scope',function($scope){
$scope.name="aliceqqq";
}]);
指令配置項(xiàng)
angular.module('myApp', []).directive('first', [ function(){
return {
// scope: false, // 默認(rèn)值,共享父級作用域
// controller: function($scope, $element, $attrs, $transclude) {},
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
template: 'first name:{{name}}',
};
}]).directive('second', [ function(){
return {
scope: true, // 繼承父級作用域并創(chuàng)建指令自己的作用域
// controller: function($scope, $element, $attrs, $transclude) {},
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
//當(dāng)修改這里的name時(shí),second會在自己的作用域中新建一個(gè)name變量,與父級作用域中的
// name相對獨(dú)立,所以再修改父級中的name對second中的name就不會有影響了
template: 'second name:{{name}}',
};
}]).directive('third', [ function(){
return {
scope: {}, // 創(chuàng)建指令自己的獨(dú)立作用域,與父級毫無關(guān)系
// controller: function($scope, $element, $attrs, $transclude) {},
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
template: 'third name:{{name}}',
};
}])
.controller('DirectiveController', ['$scope', function($scope){
$scope.name="mike";
}]);
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
- 深入講解AngularJS中的自定義指令的使用
- AngularJS創(chuàng)建自定義指令的方法詳解
- AngularJS優(yōu)雅的自定義指令
- AngularJS使用自定義指令替代ng-repeat的方法
- AngularJS 自定義指令詳解及實(shí)例代碼
- AngularJS自定義指令實(shí)現(xiàn)面包屑功能完整實(shí)例
- AngularJS實(shí)現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
- AngularJS 自定義指令詳解及示例代碼
- AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法
- AngularJS自定義指令詳解(有分頁插件代碼)
- 詳解angularJS自定義指令間的相互交互
相關(guān)文章
Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示
最近因?yàn)楣ぷ餍枰隽艘粋€(gè)選擇標(biāo)簽的功能,把一些標(biāo)簽展示給用戶,用戶選擇自己喜歡的標(biāo)簽,就類似我們在購物網(wǎng)站看到的那種過濾標(biāo)簽似的,所以這篇文章就給大家介紹了Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示的方法,下面來一起看看吧。2016-11-11
淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容
本篇文章主要介紹了淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
Angular學(xué)習(xí)筆記之a(chǎn)ngular的$filter服務(wù)淺析
本文是小編記錄的angular學(xué)習(xí)筆記,通過本文首先給大家介紹了$filter服務(wù),然后介紹下內(nèi)置filter及filter的簡單使用,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11
AngularJS基礎(chǔ) ng-disabled 指令詳解及簡單示例
本文主要介紹AngularJS ng-disabled 指令,這里幫大家整理了ng-disabled指令的基礎(chǔ)指令,并附示例代碼,有需要的小伙伴參考下2016-08-08
Angular5升級RxJS到5.5.3報(bào)錯(cuò):EmptyError: no elements in sequence的解
這篇文章主要給大家介紹了關(guān)于Angular5升級RxJS到5.5.3報(bào)錯(cuò):EmptyError: no elements in sequence的解決方法,文中介紹了兩個(gè)解決方法,大家可以選擇使用,需要的朋友可以參考借鑒,下面來一起看看吧。2018-04-04
AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解
本篇文章主要介紹了AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-04-04
AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例
這篇文章給大家分享了AngularJS循環(huán)實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等基礎(chǔ)功能,對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,有需要的朋友可以看看。2016-09-09

