AngularJS: Directive to Controller communication with scope.apply not working

Question

I have a MainController and a nested Directive. I'm looking at this example to see how the communication works between controllers and directive, but mine doesn't seems to work.

Basically, I want to call a main controller scope function from a custom directive (button empty cart). See the plunkr example below.

Plukr: http://plnkr.co/edit/82STLkKxBK6htTnmnqlu?p=preview

Whenever I do console.log(scope.$apply("emptyCart()")), it's undefined for some reason.

Note: I'm trying to avoid $rootScope.broadcast as much as possible...

So far I'm using $rootScope.$emit and it works, but I'm trying to get it working with your solution. What value do I put in the "empty-cart" attribute? — ttau
– ttau, Commented Jun 5, 2014 at 18:08
It should be the name of the function on the parent scope (ie. emptyCart). I just updated my answer with a demo. — Marc Kline
– Marc Kline, Commented Jun 6, 2014 at 16:02

Marc Kline · Accepted Answer · 2014-06-06 16:01:34Z

1

You're using isolate scope for the parent directive, so the child directive does not have access to the scope of the controller.

In order to provide the child directive with access to that scope function while maintaining isolation of the parent, you can add that function as a scope: { ... } property on the parent directive:

scope: {
  ...
  emptyCart: '='
}

and set the function name to the corresponding attribute on the parent directive's view declaration:

<div ... data-show="showPopup" empty-cart="emptyCart"></div>

Then you can skip all of the workarounds you've attempted to employ in your Plunker, and just set an ng-click on the child directive in order to fire the controller function:

sHTML = "<button ... ng-click='emptyCart()'>Empty cart</button>";

Demo

edited Jun 6, 2014 at 16:01

answered Jun 3, 2014 at 19:24

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: Directive to Controller communication with scope.apply not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related