AngularJS指令元素方法绑定-TypeError：无法使用“ in”运算符在1中搜索“ functionName”

这是主模板的控制器：

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

这是指令：

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

这是在主模板中应用指令的方式：

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

这是从指令模板（website-overview.html）调用的方法：

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

问题：单击“编辑”时，此错误出现在控制台中：

TypeError：无法使用“ in”运算符在1中搜索“ editWebsite”

有人知道这里发生了什么吗？

由于您定义了表达式绑定（&），因此id如果要在HTML中将其绑定为，则需要使用包含的JSON显式调用它edit-website="editWebsite(id)"。

确实，Angular需要了解idHTML中的内容，并且由于它不属于您的范围，因此您需要通过以下操作在调用中添加所谓的“本地”：

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

或作为替代：

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

使用控制器/链接代码：

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

这是这里记录的，寻找涉及的例子 "close({message: 'closing for now'})"

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

TL; DR; -您假设已将绑定函数传递给子组件。这是不正确的。实际上，AngularJS正在解析字符串模板并创建一个新函数，然后该新函数调用父函数。

此函数需要接收带有键和值的对象，而不是简单的变量。

更长的解释

当您使用'＆'绑定函数并尝试从控制器调用该函数时，会发生这种情况，即传递一个普通变量而不是一个包含普通变量名称的对象。模板引擎需要对象键来确定如何将值传递到绑定函数中。

例如。你打电话boundFunction('cats')而不是boundFunction({value: 'cats'})

工作实例

说我创建一个像这样的组件：

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

此功能（在父级中）如下所示：

onSearch(value) {
  // do search
}

在我的父模板中，我现在可以执行以下操作：

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

这里的绑定将从字符串中解析出来。您实际上并没有传递该函数。AngularJS正在为您创建一个调用该函数的函数。在模板中创建的绑定可以包含除函数调用以外的许多内容。

AngularJS某种程度上需要弄清楚从哪里得到value的，它是通过从父对象接收对象来实现的。

在myComponent控制器中，我需要执行以下操作：

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