Angular 1.5 passing a function with parameters to a component?

Question

I have a session service like follows with two methods representing two ways of authenticating:

angular
  .module('myApp')
  .service('sessionService', SessionService);

function SessionService() {
  var $ctrl = this;

  this.logInTypeA = function(username, password, authenticator) {
    ...
  }

  this.logInTypeB = function(username, password, authenticator) {
    ...
  }

  ...
}

I have a log in form component. I would like to have two instances of the form which use the two different log in methods but are otherwise the same:

<log-in-form log-in-method="$ctrl.sessionSerive.logInTypeA"></log-in-form>
<log-in-form log-in-method="$ctrl.sessionSerive.logInTypeB"></log-in-form>

The component's JS looks something like this:

angular
  .module('myApp')
  .component('logInForm', {
    templateUrl: 'app/components/log-in-form.template.html',
    controller: LogInFormController,
    bindings: {
      logInMethod: '&'
    }
  });

function LogInFormController() {
  var $ctrl = this;

  this.username = '';
  this.password = '';
  this.authenticator = '';

  this.logIn = function() {
    $ctrl.logInMethod($ctrl.username, $ctrl.password, $ctrl.authenticator);
  };

  ...
}

However, I get an error when I try to run this:

TypeError: Cannot use 'in' operator to search for '$ctrl' in [email protected]

How do I pass a method in a service to a component?

Thanks in advance.

Loïc BERTHOU · Accepted Answer · 2017-07-27 03:52:03Z

5

Your HTML has a typo in the name of the service. Here is how I do this in Angular 1.4.x.

In the HTML, you should add the parameters of the function being called:

<log-in-form log-in-method="$ctrl.sessionService.logInTypeA(username, password, authenticator)"></log-in-form>
<log-in-form log-in-method="$ctrl.sessionService.logInTypeB(username, password, authenticator)"></log-in-form>

For the component, you need to add curly braces around the parameters and add each parameter name:

angular
  .module('myApp')
  .component('logInForm', {
    templateUrl: 'app/components/log-in-form.template.html',
    controller: LogInFormController,
    bindings: {
      logInMethod: '&'
    }
  });

function LogInFormController() {
  var $ctrl = this;

  this.username = '';
  this.password = '';
  this.authenticator = '';

  this.logIn = function() {
    $ctrl.logInMethod({username: $ctrl.username,
                       password: $ctrl.password,
                       authenticator: $ctrl.authenticator});
  };
  ...
}

answered Jul 27, 2017 at 3:52

Loïc BERTHOU

661 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

carmenism Over a year ago

Oh wow. I'm facepalming at my typo. But that wasn't my only mistake! Thank you so much for explaining the bit about the parameters in the brackets, too. Great, clear answer.

Loïc BERTHOU Over a year ago

@carmenism No worries, my pleasure!

georgeawg · Accepted Answer · 2017-07-27 06:46:10Z

If you want the code to use service functions by name:

<log-in-form log-in-method="logInTypeA"></log-in-form>
<log-in-form log-in-method="logInTypeB"></log-in-form>

Use attribute @ binding, and inject the service in the component:

app.component('logInForm', {
    templateUrl: 'app/components/log-in-form.template.html',
    controller: LogInFormController,
    bindings: {
      logInMethod: '@'
    }
});

function LogInFormController(sessionService) {
  var $ctrl = this;

  this.username = '';
  this.password = '';
  this.authenticator = '';

  this.logIn = function() {
    var method = sessionService[$ctrl.logInMethod];
    method($ctrl.username, $ctrl.password, $ctrl.authenticator);
  };

  ...
}

Use property accessor bracket notation to select the desired service method by name.

Collectives™ on Stack Overflow

Angular 1.5 passing a function with parameters to a component?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related