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 /アプリ-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コードを見ると、動作しているように見えますが、スライディングアクションは起こっていません。ページ上のLiquid Sliderを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

ディレクティブを使用すると、任意の特定の要素にスライダを付けることができます。ただし、あなたの指示には「スライダー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

有用な回答を提供してくれてありがとう、ありがとう。私はスライダー1のIDがハードコードされていることが私に不利益を与えていることを知っていました。しかし、あなたが提供したテクニックは、私がウェブサイトをよりダイナミックにするのに役立ちます。私はあなたに私の質問に答える時間をとっていただきありがとう –

Angular JSの特定のページにjQueryプラグインを読み込みます。

答えて

関連する問題