AngularJS create element in factory

Question

I'm currently learning AngularJS and I want to create an module for notifications, but I can't find any helping tutorials.

I want all my notifications add into a div, which I need to create at first. So here comes my first question. Where do I have to append the element into the DOM so the code is still valid angular-code.

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        ...
        <div class="notification-center"> //Element I need to create
            ... //Notifications come here
        </div>
    </body>
</html>

I solved it by appending the div inside the module.run() function, but somehow I don't think it should be there

var notification = angular.module('notification', []);

notification.run([function(){
    var el = angular.element('#notificationcenter');

    if(!angular.element(el).length){
        el = angular.element('<div>').attr('id', 'notificationcenter').text('{{ text }}').appendTo(angular.element('body'));
    }
}]);

For creating the notifications I've written an factory where i append the another div inside the #notificationcenter div.

notification.factory('notification', [function(){
    var defaults = {
        duration: 5000
    };

    return function(text, settings){
        var element = angular.element('<div>').addClass('notification').text(text).appendTo(angular.element('#notificationcenter'));
    };
}]);

Basically this works aswell, but when I want to create a directive for the notification, it won't apply. I've seen examples where it's done with the $compile method, but it always happened inside another directive or controller as an scope is needed, which I don't have inside a factory.

What am I doing wrong?

using angular.element is no different from using JQuery. if you are planning on making a directive that manipulates the DOM, it should use a template, not angular.element. and factories should never be responsible for DOM code. — Claies
– Claies, Commented Oct 26, 2015 at 23:33

www.admiraalit.nl · Accepted Answer · 2015-10-27 00:20:41Z

2

Define a controller, which maintains an array of notifications:

  notification.controller('NotificationController', function() {
      var ctrl = this;
      ctrl.notificationArray = [ ];
      ctrl.addNote = function (note) {
          ctrl.notificationArray.push(ctrl.notificationArray.length + ". " + note);
      };
  });

Then in HTML, perform an ng-repeat on this array:

    <div ng-controller="NotificationController as ctrl">
        <div class="notification-center" ng-if="ctrl.notificationArray.length>0">
            <div class="notification" ng-repeat="note in ctrl.notificationArray">
               {{note}}
            </div>
        </div>
        <button ng-click="ctrl.addNote('another note');">Add note</button>
    </div>

edited Oct 27, 2015 at 0:20

answered Oct 26, 2015 at 23:46

www.admiraalit.nl

6,1331 gold badge23 silver badges37 bronze badges

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

2 Comments

David Schwarz Over a year ago

thats a good idea, but where do i have to append the "wrapper"-div? Inside the module.run() function? Because I want to reuse the module and I dont want to care about writing the div manually into the template(s)

www.admiraalit.nl Over a year ago

To make this reusable, you should create a "directive". Please follow an AngularJS tutorial to learn how to do this (docs.angularjs.org/guide/directive).

Collectives™ on Stack Overflow

AngularJS create element in factory

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