AngularJS Question

angular 1.6.1 '&' binding issues

Problem:
When I bind '&' under ng-repeat(or without for that matter atm), I can't seem to trigger the parent scope's function.

HTML

<div ng-repeat="type in fC.types">
<repeater type="type" someFn="fC.someFn()"></repeater>
</div>


Parent Controller

function formControllerFn(){
var vm = this;
this.types = ['a', 'b', 'c', 'd'];
this.someFn = function(){
console.log("type");
};
}


Repeater Component

formtest.component('repeater', {
controller: repeaterFn,
bindings: {
type: '<',
someFn: '&'
},
template: `<div><span>{{$ctrl.type}}</span> <span ng-click="$ctrl.someOtherFn()">remove me</span></div>`
});

function repeaterFn(){
var vm = this;
this.$onInit = ()=>console.log(this.type);
this.someOtherFn = function(){
console.log(vm.someFn);
console.log("someOtherFn");
vm.someFn();
};
}


When clicked on
remove me
, it consoles the
vm.someFn
generic function and the text "someOtherFn" but doesn't trigger the parent
someFn
.

Not sure what I'm doing wrong here. Any help or direction is appreciated!

REPL Link

Answer Source

This is occurring because your binding is configured incorrectly. Angular converts all camel case names to kebab case, someFn -> some-fn. You just need to update your input binding to be the following:

<div ng-repeat="type in fC.types">
  <repeater type="type" some-fn="fC.someFn()"></repeater>
</div>

Plunkr

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download