Question

很抱歉，如果该问题重复了某人的问题，但是我找不到解决问题的方法。

我想制作封装的组件并向主控制器提供数据抛出函数，但是我所有的参数都是undefined。看来我做错了。

这是代码

组件：

(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)
            }
        }
    }

})();

主模板

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

主控制器

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

Answer 1

使用本地对象：

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
        });
    }
});

要将数据从隔离范围通过表达式传递到父范围，请将局部变量名称和值的映射传递到表达式包装器fn中。

有关更多信息，请参见

AngularJS Comprehensive Directive API Reference - scope

AngularJS 1.5.8：将带有参数的函数从组件传递到控制器

1 个答案: