AngularJS Error: Cannot use ‘in’ operator to search for ‘$ctrl’ in

Published

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

Source: AngularJS

Published
Categorized as javascript Tagged

Answers

Fixed Plunkr: https://next.plnkr.co/edit/ptw9PQcyG0YRNMpY

I figure you’re not still stuck on this issue, but I’m only just ran into this issue myself, which is how I found your question.

Just looking at the [AngularJS Component Guide](https://docs.angularjs.org/guide/component#component-based-application-architecture), they show an object being passed to the output callback methods with property names that will map to the parameters in the original method definition. If that’s unclear, just compare the changes made in the fixed Plunkr.

Good luck!


Max M.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq