javascript - AngularJS Error: Cannot use 'in' operator to search for '$ctrl' in - Stack Overflow

admin管理员组

文章数量:1204985

I have the directory component passing a function to the question component. The question component is to take an input, and then update the directory component with this input via the function. When the question component tries to access this function, there is the JS error: angular.min.js:123 TypeError: Cannot use 'in' operator to search for '$ctrl' in Lee. What am I doing incorrectly to trigger this error?

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', [])
  ponent('directory', {
    template: directoryTemplate,
    controller: directoryController
  })
  ponent('question', {
    template: questionTemplate,
    controller: questionController,
    bindings: {
      onClick: '&'
    }
  });

I have the directory component passing a function to the question component. The question component is to take an input, and then update the directory component with this input via the function. When the question component tries to access this function, there is the JS error: angular.min.js:123 TypeError: Cannot use 'in' operator to search for '$ctrl' in Lee. What am I doing incorrectly to trigger this error?

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: '&'
    }
  });

• javascript
• angularjs

Share Improve this question Follow asked Jan 29, 2018 at 5:32 JonJon 8,5113131 gold badges9595 silver badges149149 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 24

A similar question has been answered here: AngularJS Directive element method binding - TypeError: Cannot use 'in' operator to search for 'functionName' in 1

In a nutshell, in your template calling the component, you need to pass the signature of your function (including the argument's name):

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

And in your component you need to call your function with a JSON containing the lastName:

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

See the uploaded plunker: https://plnkr.co/edit/iOA29KGEbl6NLubP1cvb?p=preview

By the way you should use ES6 template strings for your multiline templates, like you did for updateLastName method (see https://developers.google.com/web/updates/2015/01/ES6-Template-Strings).

本文标签： javascriptAngularJS Error Cannot use 39in39 operator to search for 39ctrl39 inStack Overflow