I have the following function in controller:
angular.module('app').controller('BodyController', function(){
this.click = function(message){
alert(message);
}
})
I want to pass this function into directive's isolated scope to call it with some specific params, something like that:
angular.module('app').directive('custom', function(){
return {
restrict: 'A',
scope: {
text: '@',
click: '&click'
},
link: function(scope, element){
//...
scope.click('Hello, Plunker!');
//...
}
}
})
And I pass thefunction in this way:
<h1 custom text="Hello Plunker!" click="ctrl.click"></h1>
Here is an example: http://plnkr.co/edit/4zkxuHJIB3D339h2Oy60?p=preview
The function is not called. What am I missing?
Thanks in advance
you can do something like
angular.module('app').directive('custom', function(){
return {
restrict: 'A',
scope: {
text: '@',
click: '=click'
},
link: function(scope, element){
// console.dir(scope.click);
element.bind("click",function(){
scope.click('Hello, Plunker!');
});
element.text('Hello, Plunker!');
}
}
})
here you get click function from parent scope by click: '=click'
and bind that function to click on the element.
here is plnkr http://plnkr.co/edit/Ekw8I6Kg6tDOnIrnv4za?p=preview
or you can just pass the parameter into your directive like this http://plnkr.co/edit/mBbZil1jc4El2Jk79ru7?p=preview
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments