1

I have many controllers that operate within different pages of my application. I want to have alerts specific to each controller. An example for something pretty generic would be:

{
            "saveSuccess": {
                "alertClass": "success",
                "header": "Success!",
                "body": "File saved successfully.",
                "buttons": [{
                    "label": "OK",
                    "tooltip": "close",
                    "fn": function () {
                        $scope.alertShown = false;
                        document.querySelector("#result").innerHTML = "success acknowledged";
                    }

                }]
            },
            "confirmWarning": {
                "alertClass": "warning",
                "header": "Warning!",
                "body": "This could cause a problem. Are you sure you want to proceed?",
                "buttons": [{
                    "label": "OK",
                    "tooltip": "close",
                    "fn": function () {
                        $scope.alertShown = false;
                        document.querySelector("#result").innerHTML = "warning accepted";
                    }

                }, {
                    "label": "CANCEL",
                    "tooltip": "close",
                    "fn": function () {
                        $scope.alertShown = false;
                        document.querySelector("#result").innerHTML = "warning canceled";
                    }

                }]
            },
            "error": {
                "alertClass": "critical",
                "header": "Alert!",
                "body": "The request cannot be processed. Please try again.",
                "buttons": [{
                    "label": "OK",
                    "tooltip": "close",
                    "fn": function () {
                        $scope.alertShown = false;
                        document.querySelector("#result").innerHTML = "error acknowledged";
                    }

                }]
            }

        }

But each page would have its own messages so this fairly generic data might get pretty length and pretty specific. I want to separate all this out into different files so I don't clutter all of my controllers with configuration objects like this. I could store it as stringified JSON and retrieve it using a service, then just repeat the fairly short logic that shows and hides the alert boxes between each controller, but stringifying functions seems kind of dumb and I feel there should be a fairly clean way to

a) make my template for the alert html a partial that can be rendered across the various views with something like <alert-html></alert-html>

b)somehow keep my model in a separate file that will be stored in each separate page's folder so there is a something like

-appPage1Dir -appPage1View.html -appPage1Controller.js -appPage1AlertBoxModel.js and I can put it into some var in appPage1Controller.js's scope

c)also pull in the show/hide logic into each page of the app.

I believe I could make a factory to return the data to my controller and pretty easily just inject the template into the view, but how can I elegantly also combine the show/hide logic so that's not repeated all over the place? I don't think that this is off-topic or opinion-based, I'm sure this is a common task in angular, but I'm just not familiar enough with it to know what to do.

JSBIN of the whole thing working in the controller.

1252748
  • 14,597
  • 32
  • 109
  • 229
  • for sharing general logic and variable you could use a service or a factory [here is an example](http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js) – Joe Lloyd Aug 25 '15 at 21:57
  • @JoeLloyd A service would work, but I'm getting errors because the methods in the large object use `$scope` to change vars in the controllers scope, which is not available in the service. – 1252748 Aug 25 '15 at 22:23
  • in that case could you make a factory with a bunch of methods that do things to `var` and then instantiate the different methods within the controller?breaking things down to smaller manageable methods seems like the way too go. – Joe Lloyd Aug 26 '15 at 11:24
  • @JoeLloyd Could you submit an answer showing how to do this? I am not sure that I follow. – 1252748 Aug 26 '15 at 15:50

0 Answers0