在 Angular 路由/视图加载后加载 jQuery 脚本

Question

我只是在学习 AngularJS。我目前有一个简单的 SPA，它加载两个容器，根据 URL 一个接一个地切换。

导航链接 - 凯斯菲林 - 视频

使用基本的 Angular 路由，我能够成功加载两者。但是，其中一个页面 (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