建立 Directive:
假設我們需要客製化一個按鈕,其主要目的可以讓 Click 執行後,提供一個方式讓 Controller 來執行其他後續任務。程式碼如下:
app.directive('mybutton', function(){
return {
restrict: 'E',
scope: {
// 定義屬性名稱,& 別忘了加入
callback: '&afterClick'
},
link: function(scope, element){
element.on('click', function(){
// Do something ...
alert('processing...');
// 執行後續任務,實際函式定義於你的 Controller
scope.callback();
});
},
template: '<button>My Button</button>',
replace: true
};
});
使用自訂的 Directive:
接下我們就可以使用自訂的 Directive 於 HTML 頁面,完整程式碼如下:
HTML 部分
// 務必注意屬性寫法,要加入 '-'
<mybutton after-Click="test()"></mybutton>
Javascript 部分:
...
app.directive('mybutton', function(){
return {
restrict: 'E',
scope: {
callback: '&afterClick'
},
link: function(scope, element){
element.on('click', function(){
alert('processing...');
scope.callback();
});
},
template: '<button>My Button</button>',
replace: true
};
});
app.controller('myCtrl', function($scope){
$scope.test = function(){
alert('after something was finished.');
};
});
Environment :
・ AngularJS 1.4.X
Reference :
・ AngularJS