Create global function in Angularjs?

Question

I’m working with $mdToast which is used in multiple locations for notification.

I would like to create a global function for him, which would be something like this:

function alerta(texto){
               $mdToast.show(
                $mdToast.simple()
                .content(texto)
                .theme("success-toast")
                .position('bottom right')
                .hideDelay(2000)
               );
  }

// dentro de um ctrl qualquer, eu chamar ela assim:
alerta(texto);

To what extent is this possible?

Answer 1

You can create a service that provides this function, is the angular way of doing something like.

angular.factory('meuServico', meuServicoFunction);
function meuServicoFunction($mdToast) {
  var serviceInstance = {
     mostrar : mostrar
  };
  function mostrar(texto) {
     $mdToast.show(
                $mdToast.simple()
                .content(texto)
                .theme("success-toast")
                .position('bottom right')
                .hideDelay(2000)
               );
   }
   return serviceInstance;
}

This way, just inject meuServico in the module first, and then in the controller you want to use and make the call as meuServico.mostrar('Conteudo da mensagem').

Answer 2

Possible, it is. It doesn’t mean it’s recommended, because you lose context.

Assuming that the preview $mdToast is provided by a module called mdToast:

var injector = angular.injector('mdToast');
var show = injector.get('show');

var msg = injector.get('simple')()
            .content(texto)
            .theme("success-toast")
            .position('bottom right')
            .hideDelay(2000);

show(msg);

Ricardo’s response provides the best implementation model for his case, a service.

But keep in mind that every time you invoke the method angular.injector() a new instance of injector will be created.

Answer 3

That shouldn’t work, because $mdToast will be out of context.

I think it’s ideal that you create an abstract base class, and then your controller extends that base. And in this abstraction you implement this method alerta(texto).

baseCtrl.js

var app;
(function (app) {
    var controllers;
    (function (controllers) {
        var AppCtrl = (function () {
            function AppCtrl($mdToast) {
                // construtor ...
                this.alerta = function(texto) {
                    this.$mdToast.show($mdToast.simple()
                        .content(texto)
                        .theme("success-toast")
                        .position('bottom right')
                        .hideDelay(2000));
                }
            }
            return AppCtrl;
        })();
        controllers.AppCtrl = AppCtrl;
    })(controllers = app.controllers || (app.controllers = {}));
})(app || (app = {}));

mainCtrl.js

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var app;
(function (app) {
    var controllers;
    (function (controllers) {
        var MainCtrl = (function (_super) {
            __extends(MainCtrl, _super);
            function MainCtrl($scope, $mdToast) {
                _super.call(this, $mdToast);
                this.$scope = $scope;
                this.$mdToast = $mdToast;

                // Construtor da controller...

            }
            MainCtrl.$inject = ["$scope", "$mdToast"];
            return MainCtrl;
        })(controllers.AppCtrl);
        app.mainApp.controller("mainCtrl", MainCtrl);
    })(controllers = app.controllers || (app.controllers = {}));
})(app || (app = {}));

So, you can make all your controllers inherit from Appctrl, and they can all consume the $mdToast firing method.

Like I said, I didn’t test it, but that’s the idea.