CODEWITHSUNDEEP
javascriptangularjs
Steve Lorimer
Steve Lorimer

Reputation: 28659

AngularJS: pass messages to a route

This is a question about style, or the angular way.

When a user signs up, I send them a confirmation email and redirect to '/'.

Also, when logging in, if the user hasn't confirmed their email, I give them an option to resend the confirmation email. I resend the confirmation email and redirect to '/'.

In both cases I would like to display an informational message at the top of the home page.

I have found a way to do this.

I create some dummy routes which have a blank template and a simple controller which sets a message on a service and redirects to '/':

It just feels a little hackish. Having to specify a non-empty template is particularly ugly.

I'm sure there must be a better way to do this? To some how pass $scope to a controller upon redirection, or something along those lines.

Here is my implementation

Dummy routes:

app.config(function($routeProvider) {
    $routeProvider
        .when('/confirm', {
            template: " ",
            controller: function(Message, $location) {
                Message.info = "We've sent you a confirmation email - please check your inbox";
                $location.path('/');
            }
        })
        .when('/reconfirm', {
            template: " ",
            controller: function(Message, $location) {
                Message.info = "We've resent your confirmation email - please check your inbox";
                $location.path('/');
            }
        })

Message service:

app.factory('Message', function () {
    this.message = {
        info: "",
    };
    return this.message;
});

For completeness, here is the message partial and controller

Partial (pulled into index.html with ng-include):

    <div class="container" ng-controller="MessageCtrl">
        <div ng-show="message.info" class="alert alert-info">
            {{ message.info }}
            <button class="close pull-right" ng-click="message.info=''">&times;</button>
        </div>
    </div>

Controller:

app.controller('MessageCtrl', function($scope, Message) {
    $scope.message = Message;
});

Upvotes: 1

Views: 1238

Answers (1)

jEdgren
jEdgren

Reputation: 96

You could use $emit / $on to do that.

You can use the MessageCtrl to display a message that trigger on an event using $on

$scope.$on('EventName', function(event, anyInput) {
    // Do your magic
}

From the other controllers sending the message you do an $emit. You can use $rootScope to make it global if you want to too.

$scope.$emit('EventName', inputToThe$on);

Check this JSFiddle: http://jsfiddle.net/4wHgh/

Here is another good explanation of $emit and $broadcast: Working with $scope.$emit and $scope.$on

Hope it is a useful alternative.

Upvotes: 3

Related Questions