Angular JS prevent controller from running on hidden element

Question

I have this codes

.state('fooState', {
    url: '/foo',
    templateUrl: 'path/to/bar.html',
    controller:'parentController'
})

// THIS IS THE bar.html
<div class="sample">
    <div ng-show="bazinga" ng-controller="child1Controller">
        <!-- cool stuff -->
    </div>
    <div ng-show="!bazinga" ng-controller="child2Controller">
        <!-- cool stuff -->
    </div>
</div>

Is it normal that when the first div with the controller child1Controller is shown, the controller child2Controller will also run? How do I prevent a controller from running if it is hidden via ng-show="false"? I only need the parentController and the child1Controller controllers running when the first div is visible. Same with when 2nd div is visible, the parentController and the child1Controller controllers should only the one's running.

You could also do this with nested states/views...

reptilicus
– reptilicus

2016-01-15 20:22:12 +00:00
Commented Jan 15, 2016 at 20:22 — reptilicus
– reptilicus, Commented Jan 15, 2016 at 20:22
So there would be another <div ui-view> ?

jofftiquez
– jofftiquez

2016-01-16 02:25:26 +00:00
Commented Jan 16, 2016 at 2:25 — jofftiquez
– jofftiquez, Commented Jan 16, 2016 at 2:25

aw04 · Accepted Answer · 2016-01-15 20:11:46Z

2

If I'm not mistaken, using ng-if rather than ng-show should solve your issue. The difference being that ng-if does not render the element to the DOM when it evaluates to false.

answered Jan 15, 2016 at 20:11

aw04

11.2k11 gold badges60 silver badges92 bronze badges

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

2 Comments

jofftiquez Over a year ago

Hi thanks, so how do I exactly do the logic? What will be the value for ng-if?

aw04 Over a year ago

It's used the same as how you're using ng-show, so literally just swap those out and the values stay the same

Collectives™ on Stack Overflow

Angular JS prevent controller from running on hidden element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related