AngularJS指令元素方法绑定 - TypeError：不能使用'in'运算符来搜索1中的'functionName'

Posted 2021-04-14

这是主模板的控制器：

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>

问题：单击EDIT时，控制台中会出现此错误：

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

有谁知道这里发生了什么？

答案

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

实际上，Angular需要了解这个id在你的HTML中的含义，并且由于它不属于你的范围，你需要通过以下方式为你的调用添加所谓的“本地人”：

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