CODEWITHSUNDEEP
javascriptangularjsangular-controller
jofftiquez
jofftiquez

Reputation: 7708

Angular JS prevent controller from running on hidden element

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.

Upvotes: 1

Views: 372

Answers (1)

aw04
aw04

Reputation: 11187

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.

Upvotes: 2

Related Questions