javascript - AngularJS 指令元素方法绑定(bind) - TypeError : Cannot use 'in' operator to search for 'functionName' in 1

Question

这是主模板的 Controller :

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: Cannot use 'in' operator to search for 'editWebsite' in 1

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

Answer 1

由于您定义了一个表达式绑定(bind) (&)，如果您希望在 HTML 中将其绑定(bind)为edit-website="editWebsite(id)".

确实，Angular 需要了解这个 id 在您的 HTML 中是什么，并且由于它不是您范围的一部分，您需要通过执行以下操作将所谓的“本地”添加到您的调用中:

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

或者作为替代:

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

使用 Controller /链接代码:

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

---

AngularJS 在其文档中对此进行了解释；在以下 URL 中查找涉及 "close({message: 'closing for now'})" 的示例:

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