AngularJS 1.5.8: pass function with arguments from component to controller

Question

I'm sorry if it a duplicate of someone question, however I can't find solution to my problem.

I want to make incapsulated component and provide data throw a function to main controller but all my argumnts are undefined. Seems I did something wrong.

Here is code

component:

(function () {

    'use strict';

    angular
        .module('app')
        .component('datePicker', {
            template: createTemplate(),
            controllerAs: 'vm',
            bindings: {
                    onSelectDate: '&'
            },
            controller: DatepickerController
        });

        function DatepickerController() {
            var vm = this;
            vm.filterDateFrom = new Date();
            vm.filterDateTo = new Date();

            vm.submitDate = submitDate;

            function submitDate() {
                console.log(vm.filterDateFrom); // here I got dates from and to
                console.log(vm.filterDateTo);
                vm.onSelectDate(vm.filterDateFrom, vm.filterDateTo)
            }
        }
    }

})();

main template

<date-picker
      on-select-date="ctrl.submitFilter(from, to)">
</date-picker>

main controller

function submitFilter(from, to) {
    console.log(from, to) // here all arguments are undefined
}

georgeawg · Accepted Answer · 2018-12-10 08:00:55Z

Use a locals object:

app.component('datePicker', {
    template: createTemplate(),
    controllerAs: 'vm',
    bindings: {
            onSelectDate: '&'
    },
    controller: "DatepickerController"
});

app.controller("DatepickerController", function() {
    var vm = this;
    vm.filterDateFrom = new Date();
    vm.filterDateTo = new Date();

    vm.submitDate = submitDate;

    function submitDate() {
        console.log(vm.filterDateFrom); // here I got dates from and to
        console.log(vm.filterDateTo);
        ̶v̶m̶.̶o̶n̶S̶e̶l̶e̶c̶t̶D̶a̶t̶e̶(̶v̶m̶.̶f̶i̶l̶t̶e̶r̶D̶a̶t̶e̶F̶r̶o̶m̶,̶ ̶v̶m̶.̶f̶i̶l̶t̶e̶r̶D̶a̶t̶e̶T̶o̶)̶ 
        vm.onSelectDate({
           "from": vm.filterDateFrom,
           "to":   vm.filterDateTo
        });
    }
});

To pass data from the isolated scope via an expression to the parent scope, pass a map of local variable names and values into the expression wrapper fn.

For more information, see

AngularJS Comprehensive Directive API Reference - scope

Collectives™ on Stack Overflow

AngularJS 1.5.8: pass function with arguments from component to controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related