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