AngularJS Using Function in Multiple Controllers

Question

Code in Controller:

    var type = null;
    var title = null;
    var content = null;

    function showMessage(type, title, content) {
      $scope.displayMessage = true;
      $scope.message = {
        type: type,
        title: title,
        content: content
      }
      $timeout(function() {
          $scope.fadeMessageSuccess = true;
      }, 3000);
    };

    var type = "success";
    var title = "Thanks for registering!";
    var content = "Your account has successfully been created!";
    showMessage(type, title, content);

The above is my code that I'm working with and it's inside a controller currently. It works perfectly however I want to clean it and up and use it in multiple controllers. How do I go about wrapping this part in a function to be used throughout the app and then only having to call the last 4 lines in my controllers:

    var type = null;
    var title = null;
    var content = null;

    function showMessage(type, title, content) {
      $scope.displayMessage = true;
      $scope.message = {
        type: type,
        title: title,
        content: content
      }
      $timeout(function() {
          $scope.fadeMessageSuccess = true;
      }, 3000);
    };

I only want to have to write the following code whenever I want to show a message:

var type = "success";
var title = "Thanks for registering!";
var content = "Your account has successfully been created!";
showMessage(type, title, content);

The View:

<div ng-controller="AccountCtrl" ng-cloak="">
  <div class="ui {{message.type}} message message-overwrite"
       ng-class="{'fade': fadeMessageSuccess} "
       ng-show="displayMessage">
    <div class="header">
      {{message.title}}
    </div>
    <p>{{message.content}}</p>
  </div>
</div>

Possible duplicate of how to reuse a function in multiple controllers — Tome Pejoski
– Tome Pejoski, Commented Jan 6, 2017 at 23:31
Check the second answer in the linked question. Creating a service and inject it in the controllers is better solution in my opinion. — Tome Pejoski
– Tome Pejoski, Commented Jan 6, 2017 at 23:33
Yes but you can't use $scope in a service which is where I get lost. — Joe Berthelot
– Joe Berthelot, Commented Jan 6, 2017 at 23:36
don't use scope in service. use normal var as usual function. — Abdelrhman Hussien
– Abdelrhman Hussien, Commented Jan 6, 2017 at 23:40

ChiefTwoPencils · Accepted Answer · 2017-01-07 01:51:02Z

As the Angular controller docs suggest, if you want to share code or state across multiple controllers use a service.

With the addition of one argument you can use a MessageService as a utility. You controllers would obviously implement the common functionality which would be the case anyway.

angular.module('app', []);
angular.module('app')
  .factory('MessageService', function() {
    return {
      showMessage: function(ctrl, type, title, content) {
        ctrl.displayMessage = true;
        ctrl.message = {
            type: type,
            title: title,
            content: content
          }
          //...
      }
    };
  })
  .controller('First', ['MessageService',
    function(MessageService) {
      var self = this;
      self.displayMessage = false;
      self.message = {};
      self.firstSrvc = function() {
        MessageService.showMessage(self, "type", "title", "content");
      };
    }
  ])
  .controller('Second', ['MessageService',
    function(MessageService) {
      var self = this;
      self.displayMessage = false;
      self.message = {}
      self.secondSrvc = function() {
        MessageService.showMessage(self, "type2", "title2", "content2");
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="First as f">
    <div ng-controller="Second as s">
      <h3>First: {{f.displayMessage}}</h3>
      <div ng-show="f.displayMessage">
        <h3>{{f.message.type}}, {{f.message.title}}, {{f.message.content}}</h3>
      </div>
      <h3>Second: {{s.displayMessage}}</h3>
      <div ng-show="s.displayMessage">
        <h3>{{s.message.type}}, {{s.message.title}}, {{s.message.content}}</h3>
      </div>
      <div>
        <button ng-click="f.firstSrvc()">First</button>
        <button ng-click="s.secondSrvc()">Second</button>
      </div>
    </div>
  </div>
</div>

Abdelrhman Hussien · Accepted Answer · 2017-01-07 00:04:14Z

0

Simple answer: service .Wrap all your app logic in services. Then you could simply injected in any controller and use it anywhere in your app.

Since this case doesn't have a lot of logic and It's really conected to the view then you could make a custom directive.

One more thing if you are trying to make a tosatr there are tones of already implemented ones. Don't reinvent the wheel.

I hope that helps. Good luck

edited Jan 7, 2017 at 0:04

answered Jan 6, 2017 at 23:38

Abdelrhman Hussien

3743 silver badges16 bronze badges

6 Comments

Joe Berthelot Over a year ago

Yeah but that doesn't work as $scope doesn't work in a service.

Abdelrhman Hussien Over a year ago

I will do a little plunker for you. may be that helps

Abdelrhman Hussien Over a year ago

would you explain to me what is the show messages do, please ?

Joe Berthelot Over a year ago

$scope.displayMessage triggers an ng-show, $scope.message is all the data-binding and the $timeout function triggers a CSS class which hides the object.

Joe Berthelot Over a year ago

I added the view to the original post so it might make more sense.

|

Collectives™ on Stack Overflow

AngularJS Using Function in Multiple Controllers

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related