Share functions between controllers AngularJS

Question

I'm assuming this is quite straightforward, but how can I have global functions that I can access in my controllers by storing the function in the '.run' phase?

Quite simply, a button is clicked in the DOM that triggers the global function that is called in the appropriate controller..

I've tried various methods and would like a really simple approach to this that helps to minimise the amount of code I've currently got. See below:

**HTML**
<input data-ng-click="clearSignInError()" data-ng-model="email" 
type="email"
id="inputEmail" class="form-control" placeholder="Email address" 
required>
**JS**
app.run(['$rootScope', '$state', function($rootScope, $state) {
 $rootScopecope.clearSignInError = function () {
 $rootScope.loginError = null;
 $rootScope.loginSuccess = null;
 };
}]);
app.controller('loginCtrl', ['$scope', 'Auth', '$state', '$rootScope'
 function($scope, Auth, $state, $rootScope) {
 $rootScope.clearSignInError()
}]);

• Hadi: you can use factory or inject controller
• Sarantis Tofas: has been asked before stackoverflow.com/questions/35370161/…
• Richard Ansell: I will check this out now!

Answer 1

Your best bet might be to use Services or Factories, and then inject these as dependencies when needed throughout your application.

Angular Services

Angular Factories

Edit: Added an example service in this plunkr

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

app.service('AuthService', function() {
 this.loginSuccess = function() {
 // do stuff when login is successful
 }
 this.loginError = function() {
 // handle login errors here
 }
 this.clearLoginError = function() {
 console.log("Clear Login Error");
 alert("Clear Login Error");
 }
});
// modified your controller
app.controller('loginCtrl', ['$scope', 'Auth', 'AuthService', '$state', '$rootScope', function($scope, Auth, AuthService, $state, $rootScope) {
 $scope.clearSignInError = AuthService.clearLoginError;
}]);
**HTML**
<input data-ng-click="clearSignInError()" data-ng-model="email"
type="email" id="inputEmail" class="form-control" placeholder="Email address" required>

• Richard Ansell: I did try the factory option although I must have got it wrong. Based on my above code, how could i achieve what I need setting up a service? I'm simply removing an error on screen following an incorrect form submission when the user clicks back on the input box.
• Richard Ansell: Just been trying the new code, although I'm getting a red line under $scope.clearSignInError() in my controller?
• itsphilz: Sorry that line should be $scope.clearSignInError = AuthService.clearLoginError(); and the HTML should be data-ng-click="clearSignInError"
• Richard Ansell: Still no luck I'm afraid, I've tried the following: 'app.service('AuthService', function() { this.clearSignInError = function($scope) { $scope.loginError = null; $scope.loginSuccess = null; }; });' and in my controller: '$scope.clearSignInError = AuthService.clearSignInError();'
• itsphilz: I have updated my answer with a plunkr for you, so you can see it in action.

Answer 2

You can make use of a factory instead of hooking up with rootScope. In this way, you can include your factory as a dependency in any controller you want. Here's a video demonstration which might help you to get started:

Factories In AngularJS

• Richard Ansell: If this is the case, I assume I will not need to use all of this code in the factory: $rootScopecope.clearSignInError = function () { $rootScope.loginError = null; $rootScope.loginSuccess = null; };. Instead, I would use $scope.loginError = null; $scope.loginSuccess = null; and store these in a function that is called in the controller using $scope.clearSignInError?
• mehulmpt: Yes. You can do that.
• mehulmpt: But that's not called using $scope.clearSignInError. Its called using your factory name.
• Richard Ansell: I'm trying this now, but I'm also using another 'return' method in my existing factory for another function. It's saying 'unreachable code' at the start of the 'return' method for some reason - everything else seems fine but just want to check this issue out first before trying it.