How to create common function for alert in angularjs

Question

I am working on angularJS, and I want to create common alert function, so I can use it in all controllers for validations and other purposes.

my service is,

JodoModule.service("CommonSrv", function ($rootScope) {
this.showAlert = function (message, status) {
    $rootScope.alertMessage = message;
    $rootScope.showAlert = status;
}
this.hideAlert = function () {
    $rootScope.showAlert = false;
}

})

ControllerOne,

$rootScope.CommonSrv = CommonSrv;
    CommonSrv.showAlert("No notifications available", true);

ControllerTwo,

$rootScope.CommonSrv = CommonSrv;
    CommonSrv.showAlert("No data available", true);

Controller calling services and I am able to see alert div contents on screen

My view is,

<div ng-show="showAlert" class="alertCustom">
    <label>{{alertMessage}}</label>
    <br /><br />
    <a ng-click="CommonSrv.hideAlert()" class="btn btn-warning  btn-sm">
        &nbsp; <span style="color:brown; font-weight:bold">OK</span> &nbsp;
    </a>
</div>

Here, I have common template created, and I am assigning "alertMessage" and "showAlert", which is working fine. But what I should write in place of " ???whichName??? " controller.

Because I want to use same service from different controllers. but when I call "hideAlert()" action, where it needs to go and execute?

We cannot write serviceName in ng-Controller directory.

So what I need to change in my code to make it work ?

floribon · Accepted Answer · 2015-04-04 03:18:17Z

2

If you want to keep everything in the $rootScope, you can add it your service as well:

$rootScope.CommonSrv = CommonSrv;

You can then access hideAlert directly from this service in the HTML, you do not need any ng-controller. Here is the template:

<div ng-show="showAlert" class="alertCustom">
    <label>{{alertMessage}}</label>
    <br /><br />
    <a ng-click="CommonSrv.hideAlert()" class="btn btn-warning  btn-sm">
        &nbsp; <span style="color:brown; font-weight:bold">OK</span> &nbsp;
    </a>
</div>

And to be clean, I would recommend to keep the alertMessage and showAlert within this service rather than in the root scope, it then becomes:

JodoModule.service("CommonSrv", function ($rootScope) {
  this.showAlert = function (message, status) {
    this.alertMessage = message;
    this.showAlert = status;
  }

  this.hideAlert = function () {
    this.showAlert = false;
  }
})

And the HTML:

<div ng-show="CommonSrv.showAlert" class="alertCustom">
    <label>{{CommonSrv.alertMessage}}</label>
    <br /><br />
    <a ng-click="CommonSrv.hideAlert()" class="btn btn-warning  btn-sm">
        &nbsp; <span style="color:brown; font-weight:bold">OK</span> &nbsp;
    </a>
</div>

edited Apr 4, 2015 at 3:18

answered Apr 4, 2015 at 2:40

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

floribon Over a year ago

That's because CommonSrv need to be accessible from the HTML, i.e. you need to put it in your scope: $scope.CommonSrv = CommonSrv; (or in the root scope if you want)

Keval Patel Over a year ago

Hey, it was my mistake... Now it's working... I wrote CommonSrvTemp insted of just CommonSrv... Thanks... :)

Collectives™ on Stack Overflow

How to create common function for alert in angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related