在Angular JS的特定頁面上加載jQuery插件

用Angular JS讓自己陷入泡菜。雖然我有點喜歡它，但我還不能充分利用它。我希望得到一些幫助。目標：僅在主頁上加載jQuery插件Liquid Slider。在Angular JS的特定頁面上加載jQuery插件

什麼正在index.html頁面（段）上使用的：

<head> 
<script src="js/angular.min.js"></script> 
<script src="js/angular-route.min.js"></script> 
<script src="js/app-dev.js"></script> 
<script src="js/jquery-2.1.1.min.js"></script> 

<!-- For Liquid Slider --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script> 
<script src="js/liquid-slider/js/jquery.liquid-slider.min.js"></script> 
<script> 
    //Bit of a no no from what i've read 
    setTimeout(function(){ 
    $('#slider-1').liquidSlider({ 
     autoSlide: true, 
     autoSlideInterval: 1500, 
     dynamicArrows: true 
    }); 
    console.log('success!'); 
    }, 500); 
</script> 
</head> 
<body ng-app="app"> 
//stuff 
<ng-view autoscroll="true" class="main-show"></ng-view> 
</body>

JS/APP-dev.js顯示：

var app = angular.module("myApp", ['ngRoute']); 
app.config(function($routeProvider) { 
    $routeProvider 
    // route for the home page 
    .when('/home', { 
     templateUrl : 'views/home-dev.html',     
    }) 
    .otherwise('/home'); 
});

目前液體滑塊被稱爲每一頁上。看着jquery代碼，它看起來像是在運行，但沒有滑動動作發生，我通過在沒有Angular的頁面上運行液體滑塊來隔離它，並且它工作正常。我導致我相信我錯誤地實現了一些東西。任何指導將不勝感激。

- 更新 - 我一直在尋找到的指令和得到的東西的工作

app.directive('mySlider', function() { 
    return { 
    link: function(scope, element){ 
       $('#slider-1').liquidSlider({ 
        autoSlide: true, 
        autoSlideInterval: 1500, 
        forceAutoSlide:true, 
        dynamicArrows: true, 
        minHeight: 10, 
       }); 

     } 
    }; 
});

雖然這工作，我不認爲這是正確的做法。

來源

2016-11-29 Akira Dawson

使用指令是一個很好的方法，因爲您可以將滑塊附加到所需的任何特定元素。但是，您的指令具有硬編碼的「slider-1」ID。你想那是動態的，所以你可以將它連接到任何元素：

app.directive('mySlider', function() { 
    return { 
    link: function(scope, element){ 
       $(element).liquidSlider({ 
        autoSlide: true, 
        autoSlideInterval: 1500, 
        forceAutoSlide:true, 
        dynamicArrows: true, 
        minHeight: 10, 
       }); 
     } 
    }; 
});

這將啓動具有my-slider屬性，像這樣的HTML元素的液體滑塊：

你可以走得更遠，使其他液體滑塊屬性動態化是這樣的：

app.directive('mySlider', function() { 
    return { 
    link: function(scope, element, attrs){ 
       $(element).liquidSlider({ 
        autoSlide: attrs.autoSlide==="true", 
        autoSlideInterval: autoSlideInterval, 
        forceAutoSlide: attrs.forceAutoSlide==="true", 
        dynamicArrows: attrs.dynamicArrows==="true", 
        minHeight: attrs.minHeight, 
       }); 
     } 
    }; 
});

而在你的HTML這樣設置這些動態選項：

<div my-slider auto-slide="true" auto-slide-interval="1500" 
    force-auto-slide="true" dynamic-arrows="true" min-height="10">Test contents</div>

來源

2016-11-29 23:25:10

感謝您提供有用的答案，並超越和超越。我知道硬編碼的slider-1 ID使我處於劣勢。但是，您提供的技術將確實幫助我使網站更具活力。我感謝您花時間爲我解答問題 –

在Angular JS的特定頁面上加載jQuery插件

回答

相關問題