Show Hide Div AngularJs

Question

This is so strange and I have no idea why this simple scenario isn't working. I'm still fairly new to Angular after a life with jQuery and Backbone.

Here's the basic structure of the code...

<div class="span10" ng-controller="ClientCtrl" ng-hide="addClient">
  <button ng-click="addClient = true" class="btn btn-primary">
    Add new Client
  </button>
</div>
<div class="span10" ng-controller="ClientCtrl" ng-show="addClient">
  <div ng-include src="'views/partials/client.html'"></div>
</div>

The expected behavior is that clicking the 'Add New Client' button will show the second div. The actual behavior is that the first div gets hidden (as it should) but the second div stays hidden. There is no controlling behavior in the controller.

I've tried it with a scope function, setting the initial in the property in the controller and numerous other things without any luck. What am I doing wrong? I've checked to be sure they are on the same scope and that doesn't "seem" to be the problem. Thanks for the help because this is driving me crazy.

When you say "stays hidden" did you check if the ng-include is not working or does the corresponding parent div actually remain hidden? Try placing some static code inside the second div to see if the ng-include is the one failing or is it indeed the ng-show... — callmekatootie
– callmekatootie, Commented Jun 28, 2013 at 14:52
Yes, the nginclude is fine. Before click: d.pr/i/VIye and after click: d.pr/i/rSEP — Brandon
– Brandon, Commented Jun 28, 2013 at 14:55

rafi · Accepted Answer · 2013-08-27 07:30:51Z

12

AngularJS creates two separate Controllers in this case as you have mapped two controllers using ng-controller attribute. The scope within one controller does not affects the scope of second.

You must do something like this:

<div ng-controller="ClientCtrl">
  <div class="span10" ng-hide="addClient">
    <button ng-click="addClient = true" class="btn btn-primary">
      Add new Client
    </button>
  </div>
  <div class="span10" ng-show="addClient">
    <div ng-include src="'views/partials/client.html'"></div>
  </div>
</div>

edited Aug 27, 2013 at 7:30

rafi

1,5533 gold badges31 silver badges44 bronze badges

answered Jun 28, 2013 at 14:53

Viral Patel

8,6093 gold badges34 silver badges29 bronze badges

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

3 Comments

Brandon Over a year ago

That's the answer! I should have realized that but never tried it. Will accept the answer when SO allows. Oh, and thank you.

blaster Over a year ago

Yep. Controllers are not injected as shared instances (singletons) by Angular (although services are!)

Unknown Coder Over a year ago

Thanks a lot for this answer. It's almost two years later, but the answer is still relevant, spent A LOT of time on this before finally coming across this. AngularJS can be really frustrating sometimes!

Collectives™ on Stack Overflow

Show Hide Div AngularJs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related