How to organize popup windows in angular?

Question

JavaScript

Hello! I have popup windows on my site. When you click certain buttons (such as "Add Code", "Add Store") they should pop up. What is the best way to organize it? Use just DOM (and CSS) or inject scope variables?
Now it works like this:

app.directive('showPopup', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      $(elem).click(function () {
        $('#' + attrs['showPopup']).fadeIn(function () {
          // некая логика
        });
      });
    }
  }
});

I think it would be more correct to use a scope variable, along with ng-if. However, popups and buttons are at the disposal of different controllers (which, in general, is not a problem, because there is a $rootScope. Right?).

Answer 1

It is best to implement modal windows through a service.
Have a look at the ready-made solutions:
Under bootstrap angular-ui.github.io/bootstrap/#/modal
For simpler cases, I used this https://github.com/btford/angular-modal with some improvements.
In the most simplified version, it can be implemented through a directive that will simply hang an event on an element and call your popup plugin (if you have one).

Answer 2

Although a lot of time has passed, I think this article of mine on the implementation of simple modal windows in Angular will not be superfluous: akuma.su/blog/vsplyvayuschie-okna-na-angularjs.html