current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 2 down vote favorite
1

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.

share|improve this question
    
Can't you just remove them from the document.ready and define them at a global scope? – Danny Feb 27 '14 at 21:43

1 Answer 1

up vote 1 down vote

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.

share|improve this answer
    
Why are you firing off a jQuery plugin in a service? Any DOM manipulation should be in a directive. – David East Feb 27 '14 at 21:24
    
Because it's the type of plugin that fires off an alert, it does not require binding to an existing html element, so I don't see the need to bind it to the template – Alexandrin Rus Feb 27 '14 at 21:30
    
It still does DOM manipulation, thus requiring to be in a directive. – David East Feb 27 '14 at 21:31
    
In this case I don't really agree, alerts are more stand alone than typical jQuery plugins, I would agree with you for most plugins, the only other way I can see this work with a directive, is to have a listener inside the directive, and fire events that the directive catches, and I think that's just unnecessary complication. Keeping it simple is sometimes the way to go. – Alexandrin Rus Feb 27 '14 at 21:37
1  
@DavidEast Actually dialogs, alert boxes are the exceptions to the rule that all DOM manipulation should be in a controller. See Angular-UI's $dialog service for example. – ganaraj Dec 18 '14 at 10:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.