javascript - Loading jQuery script after Angular route / view loads -

javascript - Loading jQuery script after Angular route / view loads -

i learning angularjs. have simple spa loads 2 containers, switching 1 after depending on url.

navigation links - casefilm - videos

using basic angular routing, able load both successfully. however, 1 of pages (videos.php) contain slideshow script based on jquery , simple bootstrap modal load fullscreen youtube videos. when page called, angular loads view reason not recognize jquery instance.

here's videos view code:

<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>

here's 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){ homecoming { restrict: 'a', link: function(scope,element,attrs) { $timeout(function() { $(element).slick(scope.$eval(attrs.slickslider)); }); } } });

and lastly, on index.php before </body> tag:

<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 want maintain total 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>

summary:

angular routing works. jquery not working when video view called.

question:

am missing something? is there improve way deal this?

use requirejs . in requirejs can set dependency.

here illustration given :

<!doctype html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> // override require function, it's "rebinded" version window.require = require.bind(this, { // set baseurl 1 time , 'baseurl': '/some/absolute/path/and_another_one/' }); </script> </head> <body> <script type="text/javascript"> require([ "mymodule1.js", "mymodule2.js" ], function($mymodule1, $mymodule2) { // here... }); </script> </body> </html>

you can find more @ :

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

javascript jquery html css angularjs