Routing to another page error

[Jawe-Programmer]

https://vimeo.com/264209784

this what happened to my angular photoswipe
when i route to another page after clicking the image and opening photoswipe
the page redirect me to home
but
https://vimeo.com/264213915
this video shows okay i used to click the another album after clicking the image then route to
another page and it works fine

i did not used all your codes
this is my html codes

        <div class="album-panel">
            <ul>
                <li ng-repeat="wed in Album" ng-click="AlbumClick(wed)">
                    <img image-exist ng-src="{{wed.WebPath}}" />
                    <div class="descp">
                        <p>{{wed.Title}}</p>
                        <p class="sub">{{wed.PhotoCount}} PHOTO(S)</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="photo-panel">
            <div id="photos">
                <div ng-repeat="s in Pictures.slides track by $index" ng-click="showGallery($index)">
                    <img ng-src="{{ s.src }}" image-exist alt="slide number {{ $index }}" />
                </div>
                <div photo-swipe slides="Pictures.slides" open="Pictures.open" slide-selector="#photos > div > img" options="Pictures.options"></div>
            </div>
        </div>
    </div>

then this is my directive

`var photoSwipe = function (c, h, temp) {
return {
restrict: 'AE',
replace: true,
scope: {
open: '=',
options: '=',
slides: '=',
slideSelector: '@',
template: '@'
},
link: function (scope, element, attrs) {
scope.template = scope.template || 'dialogs/PhotoSwipe.html';

            h.get(scope.template, { cache: temp }).then(function (r) {
                var template = angular.element(r.data);
                element.append(c(template)(scope));
            }) 
            var sGallery = (function () {
                var pswpElement = document.querySelectorAll('.pswp')[0];
                if (angular.isUndefined(scope.options.getThumbBoundsFn) &&
                    angular.isDefined(scope.slideSelector)) {
                    scope.options = angular.merge({}, {
                        getThumbBoundsFn: function (index) {
                            var tn = document.querySelectorAll(scope.slideSelector)[index];
                            var pageYscroll = window.pageYOffset || document.documentElement.scrollTop;
                            var r = tn.getBoundingClientRect();
                            return { x: r.left, y: r.top + pageYscroll, w: r.width };
                        }
                    }, scope.options)
                } 
                scope.gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default || false, scope.slides, scope.options);
                scope.gallery.init();
                scope.item = scope.gallery.currItem; 
                scope.gallery.listen('destroy', function () {
                    scope.open = false;  
                }); 
            }); 
            scope.$watch('open', function (nVal, oVal) {
                if (nVal != oVal) {
                    if (nVal != undefined) {
                        sGallery();
                    }
                } else if (!nVal && scope.gallery) {
                    scope.gallery.close();
                    scope.gallery = null;
                }
            }); 
        }
    };
} 
wDirectivesApp.directive('photoSwipe', ['$compile', '$http', '$templateCache', photoSwipe]);`

then this is my controller

$s.Pictures.options = { index: 0 }

    $s.AlbumClick = (function (ap) {    
        $s.Pictures.open = undefined; 
        $s.Pictures.slides =  Enumerable.From($s.Album).Where(function (x) { return x.ID == ap.ID }).Join($s.BKPic, function (x) { return x.ID }, function (a) { return a.ID_Album }, function (x, a) { return { src: a.WebPath, h: a.Height, w: a.Width } }).OrderBy(function (x) { return x.SeqNo }).ToArray() ;
    }) ;
    $s.showGallery = (function (i) { 
        if (angular.isDefined(i)) {
            $s.Pictures.options.index = i;
        }
        $s.Pictures.open = true;
    });`

i just paste all the codes that need only to use photoswipe

sorry i modify your codes but this codes works fine, but when i used your code im having a problem in
closing and opening the photoswip so i modify some of your codes.

[m00s]

Hi @Jawe-Programmer, I'm not sure I understood your issue.
Is the last snippet of code working for you?

[Jawe-Programmer]

yes @m00s , my only problem is when i route to page after clicking the image and open it with photoswipe the page return to home not to the page im routing

[Jawe-Programmer]

i tried to put this at the end of my directive

scope.$on('$destroy',
function () {
//console.log("destroy");
scope.gallery.close();
scope.gallery = null;
});

but it did not solve the problem