[英]Bind angular directive template to a event
I have a angular directive with a template like this 我有一个带有这样模板的角度指令
<Button id="testBtn">Test me<button>
I then have a directive controller where i have my API functions for the directive. 然后我有一个指令控制器,我有指令的API函数。 I now need to pass a event to the calling module that the button was clicked.So that i can define what to do on the button click in my base application.
我现在需要将一个事件传递给单击按钮的调用模块。所以我可以定义在基本应用程序中单击按钮时要执行的操作。
Something like this must go in the baseApp controller. 这样的东西必须放在baseApp控制器中。
$scope.myDirective = {
btnClick:function(){
//define the function here
}
}
My html template would look something like this 我的html模板看起来像这样
<my-simpledirective='myDirective'></my-simpledirective>
I have got to the part where i can declare my configurations in the $scope.myDirective = {} , but how can i do event definition there ? 我已经到了可以在$ scope.myDirective = {}中声明我的配置的部分,但是我如何在那里进行事件定义?
FYI: This is the way kendoUI is doing it , want to do it in the same way. 仅供参考:这是kendoUI的做法,希望以同样的方式进行。
Something like this would also be acceptable 这样的事情也是可以接受的
<my-simpledirective='myDirective' btn-clicked="myCustomClick"></my-simpledirective>
then in the baseApp controller 然后在baseApp控制器中
$scope.myCustomClick = function(){
//called when click event received
}
You could set up scope two-way binding to configuration object from controller: 您可以从控制器设置范围双向绑定到配置对象:
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);
});
}
};
});
and pass it in template as follows: 并在模板中传递如下:
<my-simpledirective config='myDirective'></my-simpledirective>
Demo: http://plnkr.co/edit/ue8EX9OR17iQxIi1ekco?p=preview 演示: http : //plnkr.co/edit/ue8EX9OR17iQxIi1ekco?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.