Question

使用Angular JS进入泡菜。虽然我有点喜欢它，但我还没有充分理解它，以便充分利用它。我将不胜感激。目标：仅在主页上加载jQuery插件Liquid Slider。

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,
                });

      }
  };
});

虽然这项工作，但我认为这不是正确的方法。

Answer 1

使用指令是一种很好的方法，因为您可以将滑块附加到您想要的任何特定元素。但是，您的指令具有硬编码的“slider-1”ID。您希望它是动态的，因此您可以将其附加到任何元素：

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

这将启动HTML元素上具有my-slider属性的液体滑块，如下所示：

<div my-slider>Test contents</div>

你甚至可以更进一步，使其他液体滑块属性动态如下：

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>

在Angular JS

1 个答案: