Home/ Questions/Q 9187443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:46:09+00:00

Using AngularJS and UI Bootstrap, I want to dynamically add alerts to DOM. But

  • 0

Using AngularJS and UI Bootstrap, I want to dynamically add alerts to DOM. But if I dynamically add an <alert> element to DOM, it’s not compiled automatically. I tried to use $compile but it doesn’t seem to understand tag names not present in core AngularJS. How can I achieve this? Is it even the right way to “manually” add elements to DOM in services?

See Plunker. The alert in #hardcodedalert is compiled and shown correctly but the contents of #dynamicalert are not being compiled.

Edit:

I’d later want to have alerts shown on different context and locations on my web page and that’s why I created a constructor function for the alerts, to have a new instance in every controller which needs alerts. And just for curiosity’s sake, I was wondering if it’s possible to add the <alert> tags dynamically instead of including them in html.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve updated your plunker to do what you’re trying to do the “angular way”.

    There are a few problems with what you were trying to do. The biggest of which was DOM manipulation from within you controller. I see you were trying to offset that by handling part of it in the service, but you were still referencing the DOM in your controller when you were using JQuery to select that element.

    All in all, your directives weren’t compiling because you’re still developing in a very JQuery-centric fashion. As a rule of thumb you should let directives handle the adding and removing of DOM elements for you. This handles all of the directive compiling and processing for you. If you add things manually the way you were trying, you will have to use the $compile provider to compile them and run them against a scope… it will also be a testing and maintenance nightmare.

    Another note: I’m not sure if you meant to have a service that returned an object with a constructor on it, so I made it just an object. Something to note is that services are created and managed in a singleton fashion, so every instance of that $alertService you pass in to any controller will be the same. It’s an interesting way to share data, although $rootScope is recommended for that in most cases.

    Here is the code:

    app.factory('alertservice', [function() {
  function Alert() {
    this.alerts = [];
    this.addAlert = function(alert) {
      this.alerts.push(alert);
    };
  }
  return {
    Alert: Alert
  };
}]);

app.controller('MainCtrl', function($scope, alertservice) {
  var myAlert = new alertservice.Alert();
  $scope.alerts = myAlert.alerts;
  $scope.add = function() {
    myAlert.addAlert({"text": "bar"});
  };
});

    Here are the important parts of the updated markup:

      <body ng-controller="MainCtrl">
    <div id="dynamicalert">
      <alert ng-repeat="alert in alerts">{{alert.text}}</alert>
    </div>
    <button ng-click="add()">Add more alerts...</button>
  </body>

    EDIT: updated to reflect your request

    • 0