在 Ionic 中集成 Nivo Slider 时出现问题

Question

我正在尝试将 Nivo Slider 集成到应用程序中 http://www.jqueryscript.net/slider/nivo-slider.html 但是没有成功。

这是index.html

中的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

    <link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
  </head>
  <body ng-app="appName">

  <ion-nav-view></ion-nav-view>
  <script src="lib/jquery-1.11.2.min.js"></script> 
  <script type="text/javascript" src="lib/jquery.nivo.slider.js"></script> 
  <script type="text/javascript">
            $(document).ready(function() {
                $('#slider').nivoSlider();
        });
  </script>
  </body>
</html>

下面是位于模板目录中的 home.html 中的代码：

<ion-view view-title="Home">
  <ion-content>
    <h1>Home</h1>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider"> 
                <img src="img/slider/up.jpg" data-thumb="demo/images/up.jpg" alt="" title="This is an example of a caption" />
                <img src="img/slider/walle.jpg" data-thumb="demo/images/walle.jpg" alt="" data-transition="slideInLeft" /> 
                <img src="img/slider/nemo.jpg" data-thumb="demo/images/nemo.jpg" alt="" title="#htmlcaption" /> 
            </div>
        </div>
  </ion-content>
</ion-view>

所有路径都是正确的，当运行为 html 时，滑块可以工作，但它在应用程序中不起作用。

非常感谢任何帮助。

谢谢，乌帕尔.

编辑：

我通过 controller.js 尝试了 ng-repeat；这触发了滑块，但我不确定如何使用它调用图像。

Controller.js代码：

.controller('HomeCtrl', function($scope) {
      $scope.slides = [
        { img: '<img src="img/slider/1.jpg" />', id: 1 }
      ];
    })

Home.html代码：

<ion-view view-title="Home">
  <ion-content>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider" ng-repeat="slide in slides">    
                {{slide.img}}
            </div>
        </div>
        <button class="button button-full button-assertive">
            <span>SOME TAGLINE</span><i class="ion-chevron-right right"></i>
        </button>
        <h4 class="title">Special Offers</h4>
        <hr class="rule" />
  </ion-content>
</ion-view>

PS: 我知道截图中的名字不一样

Answer 1

使用 angular 指令触发滑块：

<ion-view view-title="Home">
  <ion-content>
    <h1>Home</h1>
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider" my-nivo-slider> 
                <img src="img/slider/up.jpg" data-thumb="demo/images/up.jpg" alt="" title="This is an example of a caption" />
                <img src="img/slider/walle.jpg" data-thumb="demo/images/walle.jpg" alt="" data-transition="slideInLeft" /> 
                <img src="img/slider/nemo.jpg" data-thumb="demo/images/nemo.jpg" alt="" title="#htmlcaption" /> 
            </div>
        </div>
  </ion-content>
</ion-view>

和你的指令：

angular.module('app').directive('myNivoSlider', function() {
    return {
        restrict: 'A',
        link : function(scope, element) {
            element.nivoSlider();
        }
    };
});

另一种方法是使用离子平台就绪功能。

angular.module('app').run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        $('#slider').nivoSlider();
    });
};

我更喜欢该指令，因为它是 angular 应用程序中使用指令控制 jquery 插件的最佳实践。

再见拉尔夫

在 Ionic 中集成 Nivo Slider 时出现问题

Issues while integrating Nivo Slider in Ionic

jquery

nivo-slider

ionic-framework