3

I am using the following Visualforce multi-select picklist component (thanks @metadaddy!) and extending it to handle an 'onchange' attribute:

https://github.com/metadaddy-sfdc/Visualforce-Multiselect-Picklist

Currently I have the following working:

<c:MultiselectPicklist leftLabel="Available Options"
                        leftOptions="{!availableOptions}"
                        rightLabel="Selected Options"
                        rightOptions="{!selectedOptions}"
                        size="6"
                        width="75px"
                        onchange="console.log('Selected options changed')"/>

This uses a new 'handleOnChange' Javascript function that I added to the MultiselectPicklist component:

    function handleOnChange() {
        var scriptEl = document.getElementById('{!$Component.onchangeScript}');
        if(typeof scriptEl.value === 'string') {
            eval(scriptEl.value);
        }
    }

See the my full modified component here:

https://gist.github.com/lukemcfarlane/c77feae5522b563f2fb8

Now I am trying to plug this into my AngularJS app. The following could work but smells pretty bad:

<c:MultiselectPicklist leftLabel="Available Options"
                        leftOptions="{!availableOptions}"
                        rightLabel="Selected Options"
                        rightOptions="{!selectedOptions}"
                        size="6"
                        width="75px"
                        onchange="handleSelectChanged()"/>

function handleSelectChanged() {
    var myAppEl = $('#myApp');
    var myAppScope = angular.element(myAppEl).scope();
    myAppScope.$apply(function($scope) {
        $scope.broadcast('selectChanged', true);
    });
}

However I would much prefer if I could trigger a native change event on the component itself so that I can just write:

    <c:MultiselectPicklist leftLabel="Available Options"
                        leftOptions="{!availableOptions}"
                        rightLabel="Selected Options"
                        rightOptions="{!selectedOptions}"
                        size="6"
                        width="75px"
                        html-ng-change="handleChange()"/>

(where handleChange() is a function in my AngularJS controller)

Any ideas?

| improve this question | | | | |

Your Answer

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

Browse other questions tagged or ask your own question.