dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.38k stars 3.49k forks source link

angular ng-repeat show videos #824

Open luan13 opened 8 years ago

luan13 commented 8 years ago

It has a problem with the plugin and angular because by using the ng-repeat directive and pull data from the video URL and pass not respect the $ () event magnificPopup ().; and go to the site instead of playing in the modal

{{video.titulo}}

help me please!

luan13 commented 8 years ago

If the links are clicked, the user is navigated to the Youtube page rather than displaying a magnific-popup.

I followed instructions for a similar issue found here: https://medium.com/@AAAckerman/magnific-popup-angularjs-eabdddb7f894

except I modified it towards Youtube videos.

Below is my code:

// html

// controller angular define(["controllersFactory"], function(controllersFactory) {

controllersFactory.controller('BboyCtrl', 
    ['$scope', 
    '$timeout',

    function($scope, 
        $timeout) {

    $scope.youtubeVideos = [
        {src: 'https://www.youtube.com/watch?v=eEqh9JsNcvM'},
        {src: 'https://www.youtube.com/watch?v=eEqh9JsNcvM'},
        {src: 'https://www.youtube.com/watch?v=eEqh9JsNcvM'}
    ]

    $scope.$watch("youtubeVideos", function (newValue, oldValue) {
      $timeout(function() {
        $('.galleryOfVideos').each(function() {
          $(this).magnificPopup({
            disableOn: 700,
            type: 'iframe',
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
         });
        });
      });
    });
}]);

});