将角度指令模板绑定到事件

时间:2015-07-01 08:30:41

标签: javascript angularjs angularjs-directive

我有一个带有这样的模板的角度指令

<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
}

1 个答案:

答案 0 :(得分:2)

您可以从控制器设置范围双向绑定到配置对象:

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