Geek Answers Handbook

AngularJS - single warning div for multiple controllers

I want to have one bootstrap 3 warning to show general error messages or successful messages for all operations that the user can perform on the page. The page is divided into different sections with different controllers for each section, something like this:

<body ng-app="app">
  <div ng-controller="securityController">
    [controller methods for change password, validate user section, ...]
    <div ng-controller="salesController"> 
      <div class="alert" ng-show="message.visible"><strong>{{message.title}}</strong>{{message.text}}</div></div>
      [controller methods for admin sales, admin products, admin retails, ...]
    </div>
  </div>
</body>

Then I want to bind this html to all controller models that want to show a message when the user performs an action on the page (Ej. Security messages when it interacts with securityController methods, validation messages when it interacts with salesController methods)

At first I thought that cascading controllers and creating them with models with binding variable names used in warning HTML might work (Ej., Having a $ scope.message object in securityController and in salesController), but that’s not and I really don’t think that is the right approach.

How can i achieve this?

+2
source share
2 answers

Here is an example of the code that I wrote for one of my applications.

Demo: http://plnkr.co/edit/pGhKOTtqFxpD4fukhQrl?p=preview

Directive

app.directive('alert', function(alertService) {
  return {
    restrict: 'AE',
    link: function(scope, e, a, ctl) {
      scope.alert = alertService.alertObj;
    },
    template: '<div class="alert" ng-class="alert.type" ng-show="alert.show">{{alert.msg}}</div>'
  };
});

Service: Associates several controllers with a directive.

app.service('alertService', function() {
  var me = this;
  me.alertObj = {
    show: false,
    msg: '',
    type: 'alert-success'
  };
  me.alertShow = false;
  me.alertTypes = ['alert-success', 'alert-info', 'alert-warning', 'alert-danger'];
  me.alert = function(type, msg) {
    me.alertObj.msg = msg;
    me.alertObj.type = me.alertTypes[type];
    me.alertObj.show = true;
  };
  me.success = function(msg) {
    me.alert(0, msg);
  };
  me.info = function(msg) {
    me.alert(1, msg);
  };
  me.warning = function(msg) {
    me.alert(2, msg);
  };
  me.danger = function(msg) {
    me.alert(3, msg);
  };
  me.hide = function() {
    console.log('hiding');
    me.alertObj.show = false;
  };
  return this;
});

: Sample controller

app.controller('ctl1', function($scope, alertService) {
  $scope.name = 'World';
  $scope.showAlert = function() {
    alertService.success("This is an success alert");
  };
});

HTML:

<alert></alert>
  <div ng-controller="ctl1">
    <button ng-click="showAlert()">ctl1 - Success alert</button>
  </div>
  <div ng-controller="ctl2">
    <button ng-click="showAlert()">ctl2 - Warning alert</button>
  </div>
  <div ng-controller="ctl3">
    <button ng-click="showAlert()">ctl3 - Danger alert</button>
  </div>
  <div ng-controller="ctl4">
    <button ng-click="showAlert()">ctl4 - Info alert</button>
    <button ng-click="hide()">Clear Alert</button>
  </div>
+1
source

- Bootstrap modal, .

:

.service('ErrorService', function() {
    var error;

    this.setError = function(value) {
        error = value;
    };

    this.getError = function() {
        return error;
    };

    this.clearError = function() {
        error = undefined;
    };
})

, getError , :

.directive('errorModal', ['ErrorService', 
    function(ErrorService) {
        return {
            link: function($scope, iElm, iAttrs, controller) {
                $scope.$watch(ErrorService.getError, function(newVal, oldVal) {
                    if (newVal) {
                        // service returned something, display this modal foe further!
                    }
                });
            }
        };
    }
]);

, - JS- ( , , !), :

ErrorService.setError(someError);

, HTML- index.html:

<div error-modal></div>

, .

+2

More articles:


All Articles