Create global function in angular js?

2

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

I would like to create a global function for it, which would look 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);

How much is this possible?

    
asked by anonymous 03.12.2015 / 19:04

3 answers

2

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

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;
}

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

    
03.12.2015 / 21:55
2

Possible, it is. It does not mean that it is recommendable, as you lose context.

Assuming that the provider $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 your case, a service .

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

    
03.12.2015 / 21:57
0

This should not work because $mdToast will be out of context.

I think it's ideal to 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 all can consume the method that triggers $ mdToast.

As I said, I did not test, but the idea is this.

    
03.12.2015 / 19:31