Unable to call locally declared scope function via ng-click in a directive

Question

I have a directive (Just a button).
This directive has an isolated scope.
I want to update the object in my parent scope by clicking on the button.
But the function is not being called.

This is the plunker.

I've tried defining the function in both the link function and the controller, and they didn't work

I know I am missing something very basic. Need some form of explanation on why this is happening. Have tried looking through a lot of the other questions but I still couldn't find a clear answer.

Thanks in advance!

There are already ng-click and ng-mouseover directives. Hope you have seen\considered the same. — Chandermani
– Chandermani, Commented Dec 19, 2013 at 10:26
@Chandermani yes I've seen a few of them but I still do not understand why ng-click works with a function (declared in the link function) on an inherited scope, but not an isolated scope. — iamjt
– iamjt, Commented Dec 19, 2013 at 15:04

Nikos Paraskevopoulos · Accepted Answer · 2013-12-19 10:22:57Z

1

You forget to scope.$apply()! See forked plunk: http://plnkr.co/edit/zo1GrfwyQ8T82TJiW16h?p=preview

You need to call $apply() every time an external source touches Angular values (in this case the "external source" is the browser event handled by on()).

answered Dec 19, 2013 at 10:22

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iamjt Over a year ago

I think you've used the wrong plunker, but I got your point. Use $apply after setting the data in the click handler. I've also updated the plunker with the correct one

Collectives™ on Stack Overflow

Unable to call locally declared scope function via ng-click in a directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related