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?

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" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.