在Angular路徑/視圖加載後加載jQuery腳本

Question

我剛剛學習AngularJS。我目前有一個簡單的SPA，可以加載兩個容器，根據URL切換一個接一個。

導航鏈接 - Casefilm - 影片

使用基本角路由，我能夠成功加載兩者。不過，其中一個頁面（videos.php）包含一個基於jQuery的幻燈片腳本以及一個用於加載全屏Youtube視頻的簡單Bootstrap模式。當這個頁面被調用時，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