Angularjs - does ng-switch have a content loaded event?

Question

I have a ng-switch with different contents, one of them is a Gallery and I have to set the JQuery event to all images after switch ng-switch-when=gallery content is ready, but not lucky because it's firing the event before the content is loaded.

the gallery is the third ng-switch-when so I can't set the events with a ng-init.

So, does ng-switch have a content loaded event or directive?

<a href="" ng-click="menuSelection='gallery';loadLibraryGallery();">GALER&Iacute;A</a>

Controller

$scope.loadLibraryGallery = function(){
//I have to set this event to childrens after ng-switch-when=gallery is loaded
        $('.popup-gallery').magnificPopup();

    };

Any idea. Please Thank you.

Answer 1

You can view the ngSwitch directive's source on github It never calls any $broadcast nor $emit functions so no, it doesn't have such event.

You could try creating your own directive, which is really simple. This directive is going to be linked after the html code has been inserted.

Let's say this is your code:

html:

<ANY ng-switch="expression">
    <ANY ng-switch-when="matchValue1" data-gallery>...</ANY>
    <ANY ng-switch-when="matchValue2">...</ANY>
    <ANY ng-switch-default>...</ANY>
</ANY>

js:

angular.module('app').directive('gallery', function(){
     return function ($scope, $element, attrs) {
         $element.find('.popup-gallery').magnificPopup(); 
     }
});

Remember, that you should never modify DOM or call code that modifies DOM from the controller. This is directives job.

Answer 2

You may also use function data-ng-init, it initialize specified data before switching.

It looks like:

<ANY ng-switch="expression">
    <ANY ng-switch-when="matchValue1" data-ng-init="loadLibraryGallery()">...</ANY>
    <ANY ng-switch-when="matchValue2">...</ANY>
    <ANY ng-switch-default>...</ANY>
</ANY>

Official documentation https://docs.angularjs.org/api/ng/directive/ngInit