Update 1.4 seems to introduce a problem when binding functions in nested directives. I have a plunker example: http://plnkr.co/edit/fQLY0N8BTNs38VC8ikll
the code:
var app = angular.module('myApp', []);
app.controller('myCtrl', function(){
this.searchFunction = function(term) {
console.log('you searched for ' + term);
}
});
app.directive('outerDirective', function(){
return {
restrict: 'E',
scope: {
outer: '&'
},
template: '<inner-directive inner="cx.outer(term)"></inner-directive>',
controller: function(){
},
controllerAs: 'cx',
bindToController: true
};
});
app.directive('innerDirective', function(){
return {
restrict: 'E',
scope: {
inner: '&'
},
template: '<a ng-click="cx.execute()">Click</a>',
controller: function(){
this.execute = function(){
this.inner('fred');
}
},
controllerAs: 'cx',
bindToController: true
};
});
This worked in 1.3, but is there any new way to do this in 1.4?
By clicking on the link, you will see the following error in the console:
TypeError: 'in' 'cx' fred at fn (eval at (https://code.angularjs.org/1.4.0/angular.js:13036:15),: 2: 54) ( ) [ ] (https://code.angularjs.org/1.4.0/angular.js:8689:22) (http://run.plnkr.co/zE9xlCQNMBrOZZgi/script.js:35:14) at fn (eval at (https://code.angularjs.org/1.4.0/angular.js:13036:15),: 2: 237) (https://code.angularjs.org/1.4.0/angular.js:23090:17) Scope. $eval (https://code.angularjs.org/1.4.0/angular.js:15719:28) Scope. $apply (https://code.angularjs.org/1.4.0/angular.js:15818:23) HTMLAnchorElement. (https://code.angularjs.org/1.4.0/angular.js:23095:23) HTMLAnchorElement.eventHandler(https://code.angularjs.org/1.4.0/angular.js:3247:21)