Angular JS reusable controller functions

So this problem initially started when I found myself repeating similar functions across controllers. I also wanted to be able to access these functions from the view, which is why they are attached to the $scope. Notice both controllers contain the same function. I suppose we could attach this function to the $rootScope but that sounds messier and harder to test. Also referencing that from the view would not be as clean.

<a href="" ng-click="linkTo('https://www.digitalocean.com/?refcode=0fb20044d22d')" />

app.controller('MoviesCtrl',['$scope', function($scope){
  $scope.linkTo = function(link) {
    window.open(link, '_system');
  };
});

app.controller('TvShowsCtrl',['$scope', function($scope){
  $scope.linkTo = function(link) {
    window.open(link, '_system');
  };
});

My preferred solution is to this is

<a href="" ng-click="util.linkTo('https://www.digitalocean.com/?refcode=0fb20044d22d')" />

app.factory('UtilService', function() {
  return {
    linkTo: function(link) {
      window.open(link, '_system');
    }
  }
});

app.controller('MoviesCtrl',['$scope', 'UtilService', function($scope, UtilService){
  $scope.util = UtilService;
});

I like to use a utility service like this dry out my controllers. This was especially useful in my most recent Ionic Cordova app.

Published by

Anthony

Anthony loves open source software. Especially Linux and Ruby on Rails. He enjoys tinkering with his Raspberry Pi projects, writing code late at night, and drinking coffee. He aspires to be a Linux guru and software development magician. He is currently reading books on AI.

3 thoughts on “Angular JS reusable controller functions”

  1. Hi,

    I have some functions which are tied to scope in a controller. I want to use these functions in other controllers in the same way. I have written a service and moved all those functions. The problem is I need to access $scope in those methods because I have to update View. So, I have passed $scope as argument to the service methods. But, many people suggest not to use $scope in services as they are singleton. But, I am not using any global variables, so, I think won’t cause any issue if I pass $scope to service. What do you say? Do you have any other solution for this?

    Thanks
    Raman

Leave a Reply

Your email address will not be published. Required fields are marked *