Sharing code/method/function between AngularJS controllers

Question

I have searched around. People talked mostly about sharing data between controllers using factory. But in my case I would like to share code logic between controllers.

$scope.updatePost = function(){
  $http.get(sprintf("/posts/%s.json", post.id)).
  success(function(data, status, headers, config) {
    $scope.post = data;
  })
};

$scope.postComment = function(){
  if(!$scope.post.logged){
    window.location.href = "/users/sign_in";
  }

  var data = { post_id: $scope.post.id, content: $scope.content };
  $http.post("/comments", data).
  success(function(data, status, headers, config) {
    $scope.comment_error_messages = [];
    $scope.updatePost();
  }).error(function(data, status, headers, config) {
    $scope.comment_error_messages = data.errors;
 });
};

I would like to share these two methods in two controllers. And how do I pass in the $scope from two different controller to my share methods?

Thanks for any help.

Tom · Accepted Answer · 2015-02-26 18:50:27Z

app.factory('postService', postService);

postService.$inject = ['$http'];

function postService($http) {
  var updatePost = function(post) {
    return $http.get(sprintf("/posts/%s.json", post.id))
  }

  var postComment = function(post, content) {
    var data = { post_id: post.id, content: content };
    return $http.post("/comments", data);
  }
}

And then in your controller(s), you could call these methods

app.controller('myController', myController);

myController.$inject = ['$scope', 'postService'];

function myController($scope, postService) {
  $scope.updatePost = function() {
     postService
       .updatePost($scope.post)
       .success(function(data, status, headers, config) {
          $scope.post = data;
       });
  }

  $scope.postComment = function(){
    // you could move this to the postService if you wanted
    if(!$scope.post.logged){
      window.location.href = "/users/sign_in";
    }

    postService
      .postComment($scope.post, $scope.content)
      .success(function(data, status, headers, config) {
         $scope.comment_error_messages = [];
         $scope.updatePost();
      })
      .error(function(data, status, headers, config) {
        $scope.comment_error_messages = data.errors;
    });
}

Zeeshan Hassan Memon · Accepted Answer · 2015-02-26 19:37:46Z

3

Angularjs has provided us with Factories and Servicece, Factories are for business logic to be used in controllers and Services should contain common code that is to be used in multiple places i.e controllers or factories. This is the way how logic is to be shared inside Angularjs app.

Happy Helping!

edited Feb 26, 2015 at 19:37

answered Feb 26, 2015 at 18:50

Zeeshan Hassan Memon

8,3654 gold badges47 silver badges60 bronze badges

Comments

Joshua Ohana · Accepted Answer · 2015-02-26 20:36:12Z

3

Create a postService, which you inject into all of the controllers you want. Then have the controllers manage the $scope changes and get the content itself from your service. Below should get you started...

app.factory('postService', function() {
   var updatePost = function...
   var postComment = function ...
}

app.controller('whateverController', function($scope, postService) {
  $scope.post = postService.updatePost();
}

Update - Example of how to bind $scope element to value from service

HTML:

<div>{{comment_error_messages()}}</div>

In your controller:

$scope.comment_error_messages = function () {
   return postService.getErrorMessages()
};

And your service:

var getErrorMessages = function () {
   ...
   return val;
}

edited Feb 26, 2015 at 20:36

answered Feb 26, 2015 at 18:49

Joshua Ohana

6,14915 gold badges65 silver badges122 bronze badges

2 Comments

icn Over a year ago

Cool, how to set $scope.comment_error_messages after call postService.postComment ?

Joshua Ohana Over a year ago

@icn Many ways to handle that but what I always do is create a helper func in my service and bind the $scope element in the controller to that (I've thrown an example of this in an edit in my answer)

Collectives™ on Stack Overflow

Sharing code/method/function between AngularJS controllers

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related