2015年11月25日

AngularJS - 替 Directive 加入 Callback

網路上對於 AngularJS Directive 教學的文章已經很多了,這邊不討論基礎概念,只將 Directive 相關用法記錄下來。雖說標題是針對 Callback,但比較精確的概念是透過增加 Directive 屬性來達成執行 Callback 目的。



建立 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


熱門文章