AngularJS在多个控制器中使用函数

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>

Answer 1

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> 

Answer 2

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