將角度指令模板綁定到事件

Question

我有一個帶有這樣模板的角度指令

<Button id="testBtn">Test me<button>

然后我有一個指令控制器，我有指令的API函數。 我現在需要將一個事件傳遞給單擊按鈕的調用模塊。所以我可以定義在基本應用程序中單擊按鈕時要執行的操作。

這樣的東西必須放在baseApp控制器中。

$scope.myDirective = {
    btnClick:function(){
     //define the function here
    }
}

我的html模板看起來像這樣

<my-simpledirective='myDirective'></my-simpledirective>

我已經到了可以在$ scope.myDirective = {}中聲明我的配置的部分，但是我如何在那里進行事件定義？

僅供參考：這是kendoUI的做法，希望以同樣的方式進行。

這樣的事情也是可以接受的

<my-simpledirective='myDirective' btn-clicked="myCustomClick"></my-simpledirective>

然后在baseApp控制器中

$scope.myCustomClick = function(){
 //called when click event received
}

Answer 1

您可以從控制器設置范圍雙向綁定到配置對象：

app.directive('mySimpledirective', function() {
    return {
        scope: {
            config: '='
        },
        template: '<Button id="testBtn">{{config.label}}</button>',
        link: function(scope, element) {
            element.on('click', function(e) {
                scope.config.btnClick(e);
            });
        }
    };
});

並在模板中傳遞如下：

<my-simpledirective config='myDirective'></my-simpledirective>

演示： http ： //plnkr.co/edit/ue8EX9OR17iQxIi1ekco?p=preview