AngularJS: How to dynamically initialize a controller in a template from within another controller

Question

I would like ChildCtrl to be initialized only when the button above it is clicked. how is that possible?

<div ng-controller="ParentCtrl">
    <button>CLICK TO INIT CHILD CTRL</button>
    <div class="child-container">
        <div ng-controller="ChildCtrl" ng-include="'templates/child.html'" />
    </div>
</div>

Chandermani · Accepted Answer · 2014-12-25 13:01:26Z

3

That is easy, use ng-if:

<div ng-controller="ParentCtrl">
    <button ng-click='loadChild=true'>CLICK TO INIT CHILD CTRL</button>
    <div class="child-container" ng-if='loadChild'>
        <div ng-controller="ChildCtrl" ng-include="'templates/child.html'" />
    </div>
</div>

ng-if directive does not load the DOM unless the expression is true.

answered Dec 25, 2014 at 13:01

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

1 Comment

Reactgular Over a year ago

@YossiShasho keep in mind that ng-if creates an isolated scope. If ParentCtrl added thing to it's scope, then that is now accessed as $parent.thing inside ChildCtrl.scope because of ng-if.

Collectives™ on Stack Overflow

AngularJS: How to dynamically initialize a controller in a template from within another controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related