Question

我试图在角度js +离子中滑动图像。请检查下面的图像

在左侧有三个图像，应该由用户在旋转木马数据中滑动。它位于左侧的一小部分。所以我用它。使用这个用户滑动图像。请你告诉我为什么我的图像没有滑动。？实际上我从子文件中获取数据并使用ng-repeat我正在制作离子滑板。请你告诉我实现这个目标？

这是我的代码 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>

Answer 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){

  })

});

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

1 个答案: