AngularJS组件方法绑定未定义

Question

我有一个带有方法/回调(&(绑定的组件，但是当我调用它时，它说它是未定义的。

元件

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>

在应用程序 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并且它永远不会返回到父元素。

我已经多次将这样的绑定与其他组件一起使用，所以我觉得我一定错过了一些简单的东西，我正在为史诗般的面部时刻做好准备！

Answer 1

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

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