Two controllers, one scope variable in Angular

Question

Okay so I have two controllers that control two distinctly different parts of the site, that are on the same page.

The first is for a newsletter signup form, the second is for a basket. The second is not directly placed in the DOM as an ng-controller directive, but instead as a controller for a custom directive.

Some code:

<div ng-controller="newsletter-signup">
    <div ng-show="showLoader">
        ... Cool loading animation here ...
    </div>

    ... Form in here ...
</div>

<div basket>
    <div ng-show="showLoader">
        ... Cool loading animation here ...
    </div>

    ... Basket data in here ...
</div>

The problem that I am having is that both of these contain a div that I only want to show under certain conditions, and this div is stored in a template file:

<div ng-show="showLoader">
    ... Cool loading animation here ...
</div>

This however get's shown on both the newsletter and basket when $scope.showLoader is true in either of the controllers.

I can't seem to figure out how to isolate the scopes from each other, but continue to use the same variable name.

The basket directive looks like this:

return {
    link : linkFn,
    scope: '=',
    restrict : 'A',
    controller : 'BasketController'
};

BasketController is never defined in the template.

How can I get to a resolution with this?

I don't want the div for the newsletter to show when the basket is being updated, and likewise, I don't want the div for the basket to show when the newsletter is being updated.

EDIT: We are using the following to define components, I am wondering if this is the root cause.

window.angular.module('Basket', []);
window.angular.module('App', ['Basket']);

In a directive, you would use scope: {} to create an isolated scope. But does the basket directive have a template? I just don't understand what it does based on what you posted. — jme11
– jme11, Commented Jul 3, 2015 at 16:24
The basket is an attribute attached to the wrapping div of some dynamic content. It doesn't have it's own template. I'll update to be clearer. — Alex McCabe
– Alex McCabe, Commented Jul 6, 2015 at 8:31
Do both divs have a common parent, whose scope might also contain a "showLoader" variable? — Sebastian S
– Sebastian S, Commented Jul 6, 2015 at 8:36
@SebastianS the divs parent won't ever contain the showLoader, and it also doesn't have it's own scope. I am trying to isolate the two from each other. — Alex McCabe
– Alex McCabe, Commented Jul 6, 2015 at 9:18
@AlexMcCabe Non-nested controllers are isolated by default, so the question is: What happens on ancestor elements. — Sebastian S
– Sebastian S, Commented Jul 6, 2015 at 9:21

Sten Muchow · Accepted Answer · 2015-07-06 08:52:27Z

1

As posted by @jme11 you need to pass the scope key an object in order to get an isolated scope.

In both places the variable is different, the first place it's defined hence can be true or false. However the second place with the isolated scope unless we directly pass it the variable it will remained undefined and that is a falsy value in JS, hence the ng-show will not pass.

Here is a pen to illustrate the problem better...

return {
    link : linkFn,
    scope: {
      showLoader: '='
    },
    restrict : 'A',
    controller : 'BasketController'
};

http://codepen.io/stenmuchow/pen/BNrLZm?editors=101

edited Jul 6, 2015 at 8:52

answered Jul 6, 2015 at 8:44

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

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

9 Comments

Alex McCabe Over a year ago

Thank you for the help but I am still having some issues with it. The isolated scopes have caused me the most trouble out of everything I have tried with Angular so far. I have forked your pen and changed a couple things to be closer to what I am using it for, however I can't figure it: codepen.io/alexmccabe/pen/BNrLrY

Alex McCabe Over a year ago

Please see edits to see if this could be part of the problem?

Sten Muchow Over a year ago

Super close, but isolated scope applies to functions as well and variables! Whoops i accidentally overwrote the pen... But anyways, forget the isolated scope cuz its not needed and just makes for more confusion. codepen.io/stenmuchow/pen/KpogJJ

Alex McCabe Over a year ago

Unfortunately this is what I had before. I have discovered the root cause of the problem, I believe anyway. We are defining individual modules then calling them as dependencies to the app module, meaning that everything is in the global scope. We can't re-write the app at this stage, so I will have to find another route. Thank you for your help.

Sten Muchow Over a year ago

No problem I can show the isolated scope example I accidentally erased if it helps!

|

Collectives™ on Stack Overflow

Two controllers, one scope variable in Angular

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related