Загрузка сценария jQuery после Углового маршрута/просмотр загрузок

Question

Я просто изучаю AngularJS. В настоящее время у меня есть простой SPA, который загружает два контейнера, переключаясь один за другим в зависимости от URL-адреса.

Navigation Links - Casefilm - Видео

Использования основной Угловой маршрутизации, я могу загрузить и успешно. Тем не менее, одна из страниц (videos.php) содержит сценарий слайд-шоу, основанный на jQuery и простой загрузочный модальный для загрузки полноэкранных видео Youtube. Когда эта страница вызывается, Angular загружает представление, но по какой-то причине не распознает экземпляр jQuery.

Вот мое видео посмотреть код:

<div id="videos" class="row"> 
    <div class="col-md-12"> 
    <div id="video-carousel"> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/sbLR4m4Wxl0"><img ng-src="assets/images/thumb1.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/UMjZ2Nf-WUs"><img ng-src="assets/images/thumb2.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/27FNIjyBfsI"><img ng-src="assets/images/thumb3.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/J1G_KGv5aIk"><img ng-src="assets/images/thumb4.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/twgSNs-HxWk"><img ng-src="assets/images/thumb5.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/d1Yte1intKE"><img ng-src="assets/images/thumb6.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/IAxbbhB4n1w"><img ng-src="assets/images/thumb7.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/LjrH8T9VfZU"><img ng-src="assets/images/thumb8.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/qivmHtbeWec"><img ng-src="assets/images/thumb9.jpg" class="img-responsive" alt=""></a></div> 
    <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://www.youtube.com/embed/0d9nYoS8tlw"><img ng-src="assets/images/thumb10.jpg" class="img-responsive" alt=""></a></div> 
    </div> 
    </div> 
</div><!-- #videos --> 

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <div> 
      <iframe width="100%" frameborder="0" allowfullscreen=""></iframe> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Вот мои app.js:

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

humanApp.controller('HumanCtrl', ['$scope', '$http', function (scope, http){ 
    http.get('videos.json').success(function(data){ 
    scope.videos = data; 
    }); 
}]); 

humanApp.config(function ($routeProvider){ 
    $routeProvider 
    .when('/casefilm', 
     { 
      controller: 'HumanCtrl', 
      templateUrl: 'assets/partials/casefilm.php' 
     }) 
    .when('/videos', 
     { 
      controller: 'HumanCtrl', 
      templateUrl: 'assets/partials/videos.php' 
     }) 
    .otherwise({ redirectTo: '/casefilm' }); 
}); 

humanApp.directive('slickSlider',function($timeout){ 
    return { 
    restrict: 'A', 
    link: function(scope,element,attrs) { 
     $timeout(function() { 
     $(element).slick(scope.$eval(attrs.slickSlider)); 
     }); 
    } 
    } 
}); 

И, наконец, это то, что на моем index.php перед </body> тегом:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
<script src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script> 
<script src="assets/scripts/app.js"></script> 
<script src="assets/scripts/jquery.js"></script> 
<script src="assets/scripts/bootstrap/bootstrap.min.js"></script> 
<script src="assets/scripts/slick.min.js"></script> 
<!--<script src="assets/js/owl.carousel.min.js"></script>--> 
<script> 
    $(document).ready(function() { 
    $("#video-carousel").slick(
     { 
     infinite: true, 
     dots: true, 
     arrows: false, 
     slidesToShow: 2, 
     slidesToScroll: 2 
     } 
    ); 

    $(function(){ 
     $('iframe').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' }); 

     // If you want to keep full screen on window resize 
     $(window).resize(function(){ 
     $('iframe').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' }); 
     }); 
    }); 

    function autoPlayYouTubeModal(){ 
     var trigger = $("body").find('[data-toggle="modal"]'); 
     trigger.click(function() { 
     var theModal = $(this).data("target"), 
     videoSRC = $(this).attr("data-thevideo"), 
     videoSRCauto = videoSRC+"?autoplay=1;rel=0;html5=1" ; 
     $(theModal+' iframe').attr('src', videoSRCauto); 
     $(theModal+' button.close').click(function() { 
      $(theModal+' iframe').attr('src', videoSRC); 
     }); 
     }); 
    } 

    autoPlayYouTubeModal(); 
    }); 
</script> 

Резюме:

• Угловые работы маршрутизации.
• jQuery не работает при вызове моего видеообзора.

Вопрос:

• ли я что-то отсутствует?
• Есть ли лучший способ справиться с этим?

Answer 1

использование RequireJS. в requirejs вы можете установить зависимость.

Вот несколько примеров: данный

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="require.js"></script> 
     <script type="text/javascript"> 
      // override require function, with it's "rebinded" version 
      window.require = require.bind(this, { 
       // set baseUrl once and for all 
       'baseUrl': '/some/absolute/path/and_another_one/' 
      }); 
     </script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      require([ 
       "myModule1.js", 
       "myModule2.js" 
      ], function($myModule1, $myModule2) { 
       // do something here... 
      }); 
     </script> 
    </body> 
</html> 

Вы можете найти больше на:

http://www.angrycoding.com/2011/09/managing-dependencies-with-requirejs.html