AngularJS Directive element method binding - TypeError: Cannot use 'in' operator to search for 'functionName' in 1

问题

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'
    }
});

This is how the directive is applied in main template:

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

and this is method is called from 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 'in' operator to search for 'editWebsite' in 1

Does anyone know what goes on here?

回答1:

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

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

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

Or as an alternative:

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

With the controller/link code:

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

This is documented here, look for the example involving "close({message: 'closing for now'})"

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

回答2:

TL;DR; - You are assuming that the bound function is being passed to the child component. This is incorrect. In fact, AngularJS is parsing the string template and creating a new function, which then calls the parent function.

This function needs to receive an object with keys and values, rather than a plain variable.

Longer Explanation

This happens when you have bound a function using '&', and have tried to call that function from your controller, passing a plain variable rather than an object containing the name of the plain variable. The object keys are needed by the templating engine to work out how to pass values into the bound function.

eg. you have called boundFunction('cats') rather than boundFunction({value: 'cats'})

Worked Example

Say I create a component like this:

const MyComponent = {
  bindings: {
    onSearch: '&'
  },
  controller: controller
};

This function (in the parent) looks like this:

onSearch(value) {
  // do search
}

In my parent template, I can now do this:

<my-component on-search="onSearch(value)"></my-component>

The binding here will be parsed from the string. You're not actually passing the function. AngularJS is making a function for you which calls the function. The binding created in the template can contain lots of things other than the function call.

AngularJS somehow needs to work out where to get value from, and it does this by receiving an object from the parent.

In myComponent controller, I need to do something like:

handleOnSearch(value) {
  if (this.onSearch) {
    this.onSearch({value: value})
  }
}

来源：https://stackoverflow.com/questions/30244358/angularjs-directive-element-method-binding-typeerror-cannot-use-in-operator

标签

javascript

angularjs

angularjs-directive

angularjs-scope