Javascript AngularJS 指令元素方法绑定 - TypeError：无法使用“in”运算符在 1 中搜索“functionName”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30244358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Directive element method binding - TypeError: Cannot use 'in' operator to search for 'functionName' in 1
提问by CodeVirtuoso
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):
这是从指令模板（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
类型错误：无法使用“in”运算符在 1 中搜索“editWebsite”
Does anyone know what goes on here?
有谁知道这里发生了什么？
回答by floribon
Since you defined an expression binding (&), you need to explicitely call it with a JSON containing the idif you want to bind it in the HTML as edit-website="editWebsite(id)".
由于您定义了表达式绑定 ( &)，因此您需要使用包含 的 JSON 显式调用它，id如果要将其绑定到 HTML 中为edit-website="editWebsite(id)"。
Indeed, Angular need to understand what this idis 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:
实际上，Angular 需要了解idHTML 中的内容，并且由于它不属于您的范围，因此您需要通过执行以下操作将所谓的“本地人”添加到您的调用中：
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'})"
这是记录在此处，查找涉及的示例 "close({message: 'closing for now'})"
回答by superluminary
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.
TL; 博士; - 您假设绑定函数正在传递给子组件。这是不正确的。事实上，AngularJS 正在解析字符串模板并创建一个新函数，然后调用父函数。
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'})
例如。你打电话boundFunction('cats')而不是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 正在为您制作一个调用该函数的函数。在模板中创建的绑定可以包含除函数调用之外的许多内容。
AngularJS somehow needs to work out where to get valuefrom, and it does this by receiving an object from the parent.
AngularJS 以某种方式需要确定从哪里获取value，它通过从父级接收对象来实现这一点。
In myComponent controller, I need to do something like:
在 myComponent 控制器中，我需要执行以下操作：
handleOnSearch(value) {
if (this.onSearch) {
this.onSearch({value: value})
}
}
