如何在角度js中滑动图像？答案

【问题标题】：how to slide images in angular js?如何在角度js中滑动图像？
【发布时间】：2015-09-22 06:57:39
【问题描述】：

我正在尝试在 angular js + ionic 中滑动图像。请检查下图

在左侧有三个图像，用户应该在轮播数据中滑动。它位于左侧的一小部分。所以我在那个中使用了。使用这个用户滑动图像。你能告诉我为什么我的图像不滑动吗？实际上我正在从儿子文件中获取数据并使用 ng-repeat 我正在制作 ion-slide。你能告诉我如何实现这一目标？

这是我的代码 http://plnkr.co/edit/aXHsnZUnJ2FTHq8LAr2t?p=preview

<html ng-app="ionicApp">

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

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="script.js"></script>

</head>
<style>
    .logo {
        width: 30px;
        height: 44px;
        top: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        position: absolute;
        left: 5em;
    }
    #header{
              border-bottom: 1px solid gray;

    }

    .barTab {
        float: right;
        right: 3em;
        position: absolute;
        padding-top: 0.4em;
    }

    .barTab a {
        margin: 0.4em;
    }

    .barTab a#contactus {
        color: black;
    }

    #wrapper {
        margin-left: 5em;
        margin-right: 5em;
        margin-top: 1em;
    }
    #slideTest{
      margin-top:1em;
      border:1px solid pink
    }
</style>

<body ng-controller="MyCtrl">

    <ion-header-bar class="bar-assertive">

        <img src="https://dl.dropboxusercontent.com/s/bt3rzcwpe80r6fs/sapient-logo.png?dl=0" class="logo">

        <div class="barTab">
            <a>Home</a>
            <a>About us</a>
            <a>Projects</a>
            <a id="contactus">Contact Us</a>
        </div>
    </ion-header-bar>

    <ion-content>
        <div id="wrapper">
            <div id="header">
                <h1> Contact us</h1>
            </div>
            <div id="slideTest">
                <ion-slide-box active-slide="myActiveSlide">
                    <ion-slide ng-repeat ="n in success">
                        <img src="{{n.image}}">
                    </ion-slide>

                </ion-slide-box>

            </div>
        </div>
    </ion-content>

</body>

</html>

【问题讨论】：

标签： javascript angularjs css angularjs-scope ionic-framework

【解决方案1】：

将$ionicSlideBoxDelegate 注入您的控制器并在$scope.success 之后调用$ionicSlideBoxDelegate.update()

.controller('MyCtrl', function($scope,$http, $ionicSlideBoxDelegate) {
  $scope.myActiveSlide = 1;
  $scope.success=[];
  $http.get('defult.json').success(function(data){
    $scope.success=data;
    $ionicSlideBoxDelegate.update()
    console.log(data)
  }).error(function(data){

  })

});

【讨论】：

你能用plunker吗