Question

我让directory组件将函数传递给question组件。 question组件将接受输入，然后通过该函数使用此输入更新directory组件。当question组件尝试访问此函数时，存在JS错误：angular.min.js:123 TypeError: Cannot use 'in' operator to search for '$ctrl' in Lee。我做错了什么来触发这个错误？

https://plnkr.co/edit/hXjhhJcCWPcavp8Z8BRa?p=preview

let directoryTemplate = 
  '<question on-click="$ctrl.updateLastName()"></question>' +
  '<br />' +
  'Full name: {{$ctrl.fullName}}';

class directoryController {
  constructor() {
    this.fullName;
    this.firstName = 'Jack';
  }
  updateLastName(lastName) {
    this.fullName = `${this.firstName} ${lastName}`;
  }
}


let questionTemplate = 
  '<input ng-model="$ctrl.input" />' +
  '<button ng-click="$ctrl.onClick($ctrl.input)">Submit</button>';

class questionController {
  constructor() {
    this.input;
  }
}


angular
  .module('app', [])
  .component('directory', {
    template: directoryTemplate,
    controller: directoryController
  })
  .component('question', {
    template: questionTemplate,
    controller: questionController,
    bindings: {
      onClick: '&'
    }
  });

Answer 1

此处已回答类似的问题：AngularJS Directive element method binding - TypeError: Cannot use 'in' operator to search for 'functionName' in 1

简而言之，在调用组件的模板中，您需要传递函数的签名（包括参数的名称）：

<question on-click="$ctrl.updateLastName(lastName)">

在组件中，您需要使用包含lastName：

的JSON调用您的函数

<button ng-click="$ctrl.onClick({lastName: $ctrl.input})">

查看上传的plunker：https://plnkr.co/edit/iOA29KGEbl6NLubP1cvb?p=preview

顺便说一句，您应该为多行模板使用ES6模板字符串，就像您对updateLastName方法所做的那样（参见https://developers.google.com/web/updates/2015/01/ES6-Template-Strings）。

AngularJS错误：无法使用'in'运算符在

1 个答案: