0
我剛剛學習AngularJS。我目前有一個簡單的SPA,可以加載兩個容器,根據URL切換一個接一個。在Angular路徑/視圖加載後加載jQuery腳本
導航鏈接 - 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">×</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不工作。
問:
- 我這麼想嗎?
- 有沒有更好的方法來處理這個問題?
謝謝,但如何整合這對我目前的應用程序嗎?你能用我的代碼進一步解釋嗎? – ralphcarlo 2014-10-27 06:17:20
你能提供你的代碼http://plnkr.co嗎? – 2014-10-27 06:18:32
請參閱http://plnkr.co/edit/qdadOSWEYU8AUYGUgcDB。我只是複製粘貼我在我的一些文件中有的東西。我沒有花時間在那裏工作。 – ralphcarlo 2014-10-27 06:34:55