在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插件

回答

相关问题