Lazy loading tab body

Question

As per the documentation here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_tabset.htm

I should be able to call injectComponent controller from handleActive controller. Irrespective how I try I get

Action failed: c:ParentAccountAttachmentsComponent$controller$handleActive [Cannot read property 'injectComponent' of undefined] Failing descriptor: {c:ParentAccountAttachmentsComponent$controller$handleActive}

Am I doing something wrong here? Or is this a documentation error?

The only I was able to do what I wanted was to use helper and call the injectcomponent controller in my helper to set the body.

Controller:

({
    handleActive: function (cmp, event,helper) {
        var tab = event.getSource();
         switch (tab.get('v.id')) {
            case 'accounts' :
                helper.injectComponent('c:attachdata', tab); 
                break;
            case 'cases' :
                helper.injectComponent('c:MyContactList', tab);
                break;
        }

    }
})

Helper:

({
 injectComponent: function (name, target) {
        $A.createComponent(name, {
        }, function (contentComponent, status, error) {
            if (status === "SUCCESS") {
                target.set('v.body', contentComponent);
            } else {
                throw new Error(error);
            }
        });
    }
})

This is the code that's failing in my dev org, I am copying the code from the documentation and pasting it as is, except the part where I change the component name in the injectcomponent controller:

Component :

<lightning:tabset variant="scoped">
    <lightning:tab onactive="{! c.handleActive }" label="Accounts" id="accounts" />
    <lightning:tab onactive="{! c.handleActive }" label="Cases" id="cases" />
</lightning:tabset>

Controller:

({
    handleActive: function (cmp, event,helper) {
        var tab = event.getSource();
        switch (tab.get('v.id')) {
            case 'SQW' :
                this.injectComponent('c:attachdata', tab);
                break;
            case 'general' :
                this.injectComponent('c:MycontactList', tab);
                break;
        }
    },
    injectComponent: function (name, target) {
        $A.createComponent(name, {
        }, function (contentComponent, status, error) {
            if (status === "SUCCESS") {
                target.set('v.body', contentComponent);
            } else {
                throw new Error(error);
            }
        });
    }
})

Answer 1

You need to use a helper if you want to access related methods (via this). Your controller should look like this:

({
    handleActive: function(cmp, event, helper) {
        helper.handleActive(cmp, event, helper);
    }
})

The code you quoted as the controller should be the helper.

For reference, here is the exact code that I used in my org.

q188444a.app

---

<aura:application extends="force:slds">
        <lightning:tabset variant="scoped">
            <lightning:tab onactive="{! c.handleActive }" label="Accounts" id="accounts" />
            <lightning:tab onactive="{! c.handleActive }" label="Cases" id="cases" />
        </lightning:tabset>
</aura:application>

---

q188444aController.js

---

({
    handleActive: function(component, event, helper) {
        var source = event.getSource();
        switch(source.get("v.id")) {
            case "accounts":
                helper.injectComponent("c:q188444c1", source);
                break;
            case "cases":
                helper.injectComponent("c:q188444c2", source);
                break;
        }
    }
})

---

q188444aHelper.js

---

({
    injectComponent: function(name, target) {
        $A.createComponent(name, {}, function(component, status, error) {
            if(status === "SUCCESS") {
                target.set("v.body", component);
            } else {
                throw new Error(error);
            }
        });
    }
})

---

q188444c1.cmp

---

<aura:component >
    Placeholder for Component 1
</aura:component>

---

q188444c2.cmp

---

<aura:component >
    Placeholder for Component 2
</aura:component>

---

The documentation could be a little clearer, because the code structure itself implies that the code is all in the controller, but it is technically correct. I'll submit a request to have this clarified.