How to call custom Javascript functions from an AngularJS controller?

Question

I have a standard function in app.js defined as follows:

var app = angular.module('app', ['ngResource', 'ngRoute', 'ngSanitize'], function () {

});


$(document).ready(function () {
    // standard error box
    function showError(title, content) {
        $.bigBox({
            title: title,
            content: content == null ? "An error occurred.<br /><br />If this error persists, please contact support." : content,
            color: "#C46A69",
            //timeout: 6000,
            icon: "fa fa-warning shake animated",
            //number: "1",
            timeout: 3000
        });
    }
});

In an AngularJS controller method, I want to be able to call showError():

                    someFunction()
                        .success(function (result) {
                            // great!
                        })
                        .error(function (error) {
                            // call standard error message function
                            showError("Update Failed"); // use default error message
                        });

I know app.js is loaded, but I am not sure on how to call some of my own custom functions within the context of AngularJS.

There is a vestigial function in the angular.module definition, as I tried putting my custom function in there to see if this would work - no.

What is the appropriate way of accomplishing this?

-- UPDATE --

To clarify, I will want to invoke many custom functions like showError() and showSuccess() from many controllers, so these functions should have global scope, and not confined to one specific Angular controller.

Answer 1

Well, you could just call it from anywhere since it's javascript, however you should never use global functions so I would create an alert service with the functions I need, and then use it by injecting it inside the controllers.

angular.module('yourModule').factory('alertService', function() {
    return {
        showError : function() {
            $.bigBox({
                title: title,
                content: content == null ? "An error occurred.<br /><br />If this error    persists, please contact support." : content,
                color: "#C46A69",
                //timeout: 6000,
                icon: "fa fa-warning shake animated",
                //number: "1",
                timeout: 3000
            });
        }
    };
});

Then you can inject it inside any controller and use it:

angular.module('yourModule').controller('yourController', function($scope, alertService) {
   someFunction().success(function (result) {
       // great!
   }).error(function (error) {
       // call standard error message function
       alertService.showError("Update Failed"); // use default error message
   });
});

You can then add more functions to the service like showSuccess and it has the advantage of requiring changes in just a single place if you decide some time in the future to replace the plugin with another or make any changes to the service.

Warning

Creating directives for any jQuery plugin integration is the way to go in 99% of cases. I believe a simple alertService can "bend" the rules in this case as to avoid overcomplication by broadcasting and catching events inside a directive.