0

I have an attribute defined in a Lightning component of type object. It's used to display a modal dialog.

<aura:attribute name="modalContext" type="Object" access="private" />

<aura:if isTrue="{!v.modalContext != null}">
    <c:modalDialog onclose="{!v.modalContext.onCancel}">
        <aura:set attribute="header">
            <h2>{!v.modalContext.title}</h2>
        </aura:set>
        <aura:set attribute="body">
            <p>{!v.modalContext.message}</p>
        </aura:set>
        <aura:set attribute="footer">
            <button class="slds-button slds-button--neutral" onclick="{!v.modalContext.onCancel}">Cancel</button>
            <button class="slds-button slds-button--brand" onclick="{!v.modalContext.onAccept}">OK</button>
        </aura:set>
    </c:modalDialog>
</aura:if>

In the controller, I set the value for "v.modalContext" to trigger displaying the dialog.

component.set('v.modalContext', {
    title: 'Remove?',
    message: 'Would you like to remove the note',
    onCancel: function() {
        // Cancel
    },
    onAccept: function() {
        // Proceed
    }
});

The modal dialog appears with the correct title and message, but clicking either button causes the following error:

This page has an error. You might just need to refresh it. Error in $A.getCallback() [action.runDeprecated is not a function] Failing descriptor: {markup://aura:html}

Binding to a function in the controller works, but I would also like to bind to a function in an attribute object as well.

Does anyone know the reason for this error?

1 Answer 1

2

onclick must refer to Component JS controller method, not to "out of lightning scope methods"

onCancel and onAccept must be defined in JS controller, so i think u should have something like that :

<aura:attribute name="modalContext" type="Object" access="private" />

<aura:if isTrue="{!v.modalContext != null}">
    <c:modalDialog onclose="{!c.onModalContextCancel}">
        <aura:set attribute="header">
        <h2>{!v.modalContext.title}</h2>
    </aura:set>
    <aura:set attribute="body">
        <p>{!v.modalContext.message}</p>
    </aura:set>
    <aura:set attribute="footer">
        <button class="slds-button slds-button--neutral" onclick="{!c.onModalContextCancel}">Cancel</button>
        <button class="slds-button slds-button--brand" onclick="{!c.onModalContextAccept}">OK</button>
    </aura:set>
    </c:modalDialog>
</aura:if>

JS controller :

onModalContextCancel: function(component,event,helper) {
    // Cancel
},
onModalContextAccept: function(component,event,helper) {
    // Proceed
}

In your modalDialogComponent, define attributes :

<aura:attribute name="onModalContextCancel" type="Aura.Action" />
<aura:attribute name="onModalContextAccept" type="Aura.Action" />

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .