Vulnerability attached to AngularJS binding element - TypeError: cannot use the in operator to search for "functionName" in 1

Question

This is the controller of the main template:

app.controller('OverviewCtrl', ['$scope', '$location', '$routeParams', 'websiteService', 'helperService', function($scope, $location, $routeParams, websiteService, helperService) { ... $scope.editWebsite = function(id) { $location.path('/websites/edit/' + id); }; }]); 

This is the directive:

 app.directive('wdaWebsitesOverview', function() { return { restrict: 'E', scope: { heading: '=', websites: '=', editWebsite: '&' }, templateUrl: 'views/websites-overview.html' } }); 

So the directive is applied in the main template:

 <wda-websites-overview heading="'All websites'" websites="websites" edit-website="editWebsite(id)"></wda-websites-overview> 

and this method is called from the directive template (website-overview.html):

 <td data-ng-click="editWebsite(website.id)">EDIT</td> 

QUESTION: When EDIT is clicked, this error appears in the console:

TypeError: cannot use the 'in' operator to search for 'editWebsite' in 1

Does anyone know what is going on here?

Answer 1

Since you defined the binding of the expression ( & ), you need to explicitly call it with a JSON containing id if you want to link it in HTML as edit-website="editWebsite(id)" .

Indeed, Angular must understand that this id in your HTML, and since it is not part of your scope, you need to add what is called "locals" for your call by doing:

 data-ng-click="editWebsite({id: website.id})" 

Or as an alternative:

 data-ng-click="onClick(website.id)" 

With controller / link code:

 $scope.onClick = function(id) { // Ad "id" to the locals of "editWebsite" $scope.editWebsite({id: id}); } 

This is described here, look for an example that includes "close({message: 'closing for now'})"

https://docs.angularjs.org/guide/directive