Question

我有一个带有方法/回调（＆amp;）绑定的组件，但是当我调用它时，它表示它是未定义的。

成分

angular
    .module('sportPicker')
    .component('sportPicker', {
        template: template,
        controller: 'sportPickerController',
        controllerAs: 'vm',
        bindings: {
            selectSport: '&',
        }
    });

组件控制器

angular
    .module('sportPicker')
    .controller('sportPickerController', sportPickerController);

sportPickerController.$inject = ['$scope','sportsFactory'];

function sportPickerController($scope, sportsFactory) {
    let vm = this;
    vm.sports = sportsFactory.sports;
    vm.sendSportData = sendSportData;

    vm.$onInit = onInit;

    function onInit() {
        console.log(vm)
        vm.selected_sport = '<select a sport>';
    }

    function sendSportData(sport) {
        vm.selected_sport = sport.display;
        vm.selectSport()(sport);
    }
}

组件html

<ul class="sport-picker dropdown-menu-list" role="menu">
        <li class="dropdown-menu-sublist-title" role="menuitem">Team</li>
        <li class="divider"></li>
        <ul class="dropdown-menu-sublist" role="menu">
            <li ng-repeat='sport in vm.sports.team' role="menuitem" ng-model='vm.selected_sport' ng-click='vm.sendSportData(sport)'><a href="#">{{sport.display}}</a></li>
        </ul>
    </ul>

在app html中使用 <sport-picker select-sport='vm.setSport'></sport-picker>

setSport在视图的控制器中定义：

function MatchupController(matchupsFactory, $rootScope) {
    let vm = this;
    ...        
    vm.setSport = setSport;
    ...
    function setSport(sport) {
        console.log(sport);
        vm.sport = sport.display;
    }
}

当我在sportPicker#sendSportData中设置断点时，我点击了该断点，但是当它调用vm.selectSport()(sport)时，我得到TypeError: vm.selectSport(...) is not a function并且它永远不会回到父元素。

我已经多次使用这样的绑定与其他组件，所以我觉得我必须错过一些简单的东西，并且我为一个史诗般的facepalm时刻做好准备！

Answer 1

由于您正在使用表达式绑定，我认为您需要在HTML中调用该函数：

<sport-picker select-sport='vm.setSport()'></sport-picker>

angularjs组件方法绑定undefined

1 个答案: