How do I call a function on an Angular controller from a script elsewhere?

Question

I have a controller like this (with a bunch of stuff removed):

function SignupController($scope) {

    function isDateOfBirthValid(day, month, year) {
        // Process day, month and year and return a bool...
        // Also update the view model with the appropriate validation message
    }
}

The function isDateOfBirthValid() is used internally by the controller, but I would also like to be able to call it from external code.

(I expect I'll be told this contravenes the Angular pattern, but it really would save me a bunch of time...)

How do I need to change the controller so that I can call this function externally? I can't just move the function outside the controller, because the function modifies the view model's state in a way which is important.

What exactly do you mean by "outside"? From another Angular-Something or from a completely independent external library? — Scheintod
– Scheintod, Commented Oct 23, 2013 at 12:06
The latter. Specifically, the initialisation code for a jQuery plugin. — David
– David, Commented Oct 23, 2013 at 12:07

Anup Singh · Accepted Answer · 2013-10-23 12:05:23Z

2

You can use angular services for example

SERVICE CODE

app.service('CommonFunctions', function() {
  this.isDateOfBirthValid = function(day, month, year) {
      /// your code here
  };

  this.function2 = function() {
      // your code here
  };
});

Controller CODE

Option 1

function SignupController($scope , CommonFunctions) {

  $scope.isValidDOB = CommonFunctions.isDateOfBirthValid (1,2,2013);
}

Option 2

var app = angular.module('app');
 app.controller('SignupController', function($scope, $location, $routeParams, CommonFunctions) {
  $scope.isValidDOB = CommonFunctions.isDateOfBirthValid (1,2,2013);
});

answered Oct 23, 2013 at 12:05

Anup Singh

1,5733 gold badges16 silver badges32 bronze badges

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

2 Comments

backdesk Over a year ago

This all makes sense but it doesn't answer the question, which is how to call that validation method from outside of an Angular construct (i.e. a jQuery plugin). The problem relates to sharing code between jQuery plugins and Angular ... if that's even a valid problem. Perhaps if the plugin is initialized with a directive this problem will go away.

backdesk Over a year ago

Take a look at stackoverflow.com/questions/16935095/…

Community · Accepted Answer · 2017-05-23 12:15:45Z

0

Your function should be seperated between concerns. Its name isDateOfBirthValid really doesn't imply that it should have any side effects.

The part of the function that has side effects should be moved into a service that possess the business model. Your controller only has to reflect the content of the model. The controller is not the model.

This answers deals with how to update a service from outside of angular.

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Oct 23, 2013 at 12:02

Stephane Rolland

40.2k38 gold badges127 silver badges173 bronze badges

1 Comment

David Over a year ago

Perhaps validateDateOfBirth() would be a better name. It's normal for validation logic to have side effects such as showing messages and modifying CSS classes. And these sorts of things affect the view model, which I don't believe I can touch outside the controller.

Collectives™ on Stack Overflow

How do I call a function on an Angular controller from a script elsewhere?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related