ion-slide-box更新问题

Question

ion-slide-box更新问题

<ion-slide-box>
     <ion-slide ng-repeat="imageUrl in item.images">
              <img ng-src="{{imageUrl}}" />
      </ion-slide>
</ion-slide-box>

Run Code Online (Sandbox Code Playgroud)

和我的控制器:

$scope.changeItem = function(differentItem) {
        $scope.item = differentItem;
        //$scope.$apply();
        $ionicSlideBoxDelegate.update();
    };

Run Code Online (Sandbox Code Playgroud)

每当单击changeItem()按钮时,它会更改$ scope.item,我在ng-repeat中使用(在幻灯片框中).

我的问题是,$ionicSlideBoxDelegate.update();即使$ scope.item发生更改,也不会使用所选项目的新图像数量更新并将寻呼机索引设置为0.

Answer 1

Nik*_*ola 5

编辑:事实上,这似乎是一个已知问题,正如官方Ionic论坛上所述.但是,我让这个例子正常工作,你可以在这里看到.我改变的事情如下:

我将离子更新到版本1.0.1(你可以看到来自http://code.ionicframework.com/的链接)
使用了,$ionicSlideBoxDelegate.slide(0);因为如果你在最后一张图片上点击按钮,它会再次失败
使用了$ionicSlideBoxDelegate.update()你正在尝试的,但在内部$timeout(因为你将在论坛上阅读)可能是当你调用update()方法时,项目尚未呈现$ionicSlideBoxDelegate;

更新后的代码,供参考:

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $http, $ionicSlideBoxDelegate, $timeout) {
  $scope.item = {};

	$scope.item.images = [
		'http://lorempixel.com/400/200/',
		'http://lorempixel.com/400/300/',
		'http://lorempixel.com/400/400/',
	];


	$scope.changeImages = function(){
		$ionicSlideBoxDelegate.slide(0);
    
    $scope.item.images = [
			'http://lorempixel.com/200/200/',
			'http://lorempixel.com/300/300/'
		];
    
    $timeout(function(){
     $ionicSlideBoxDelegate.update(); 
    }, 500);
      
	};
});

Run Code Online (Sandbox Code Playgroud)

<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 Template</title>

    <link href="http://code.ionicframework.com/1.0.1/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.1/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="MyCtrl">
     <ion-slide-box show-pager="true">
     <ion-slide ng-repeat="imageUrl in item.images track by $index">
              <img ng-src="{{imageUrl}}" />
              <button class="button" ng-click="changeImages()">change imgs</button>
      </ion-slide>
</ion-slide-box>
    
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

- 编辑结束 -

我就做了一个试验项目CodePen,并且你可以看到,改变images了对item对象相应地更新.

因此,在没有看到其余代码的情况下,我们无法帮助您.您可以使用代码制作类似的CodePen示例,以便我们可以立即看到它可能出现的问题.

代码粘贴在此处供参考:

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $http) {
  $scope.item = {};

	$scope.item.images = [
		'http://lorempixel.com/400/200/',
		'http://lorempixel.com/400/300/',
		'http://lorempixel.com/400/400/',
	];


	$scope.changeImages = function(){
		$scope.item.images = [
			'http://lorempixel.com/200/200/',
			'http://lorempixel.com/300/300/',
			'http://lorempixel.com/500/400/',
		];		
	};
});

Run Code Online (Sandbox Code Playgroud)

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

Run Code Online (Sandbox Code Playgroud)

<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 Template</title>

    <link href="http://code.ionicframework.com/0.9.25/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/0.9.25/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    
    <ion-header-bar title="myTitle"></ion-header-bar>

    <ion-pane class="has-header" padding="true">
      <h2>You can't see me</h2>
    </ion-pane>
    
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，3 月前
查看次数：	3016 次
最近记录：	9 年，9 月前