ion-slide-box 更新问题

2024-04-20

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

和我的控制器:

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

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

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


edit:事实上,这似乎是一个已知问题,正如官方 Ionic 论坛 http://forum.ionicframework.com/t/slides-generated-with-ng-repeat-causing-issues-slide-box/394/23。但是,我使示例正常工作,如您所见here http://codepen.io/anon/pen/OVEjJV。我改变的事情如下:

  • 我将 ionic 更新到版本 1.0.1(你可以看到来自的链接http://code.ionicframework.com/ 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);
      
	};
});
<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>

--编辑结束--

我做了一个测试项目CodePen http://codepen.io/anon/pen/OVEjJV,正如你所看到的,改变images on the 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/',
		];		
	};
});
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ion-slide-box 更新问题 的相关文章

随机推荐

  • JQuery ajax调用默认超时值

    我收到了无法复制的错误报告 但 ajax 调用超时是当前最好的猜测 所以我试图找出 jQuery 超时的默认值 ajax 称呼 有人有主意吗 在 jQuery 文档中找不到它 似乎没有标准化的默认值 我感觉默认是0 超时事件完全取决于浏览器
  • 使用 Javascript 将日期设置为 raddatepicker

    我从服务器端获取日期值并将其传递给 javascript 方法 然后使用 Javascript 将日期分配给 Telerik RadDatePicker 控件 我得到的日期为 var Date1 16 01 2013 00 00 00 fu
  • 更广泛的递归/泛型问题

    根据提出的问题和回答的问题here https stackoverflow com questions 6650532 recursive java generics between two classes 我有第二个 更复杂的一个 至少在
  • 如何过滤wireshark以仅查看从我的计算机发送/接收的dns查询?

    我是wireshark新手 正在尝试编写简单的查询 要查看仅从我的计算机发送或由我的计算机接收的 DNS 查询 我尝试了以下操作 dns and ip addr 159 25 78 7 其中 159 25 78 7 是我的 IP 地址 看起
  • IE11 中图标字体未加载

    我们使用 icomoon 作为图标字体 它们在 Chrome 和 Firefox 中运行良好 但在 IE11 中无法显示 有时 它似乎适用于第一个页面加载 但不适用于后续页面加载 清除缓存似乎不会重置它 其他IE版本也可能存在此问题 目前我
  • Android视频删除色度键背景

    我检查过this https stackoverflow com questions 12813089 i am working on android camera app i want to capture image and chang
  • Java 和 C/C++ 之间进程间通信的最快(低延迟)方法

    我有一个Java应用程序 通过TCP套接字连接到用C C 开发的 服务器 应用程序和服务器都在同一台机器 Solaris 机器 上运行 但我们最终正在考虑迁移到 Linux 交换的数据类型是简单消息 登录 登录ACK 然后客户端请求某些内容
  • 警告 - Perl 中的“哈希分配中的元素数量为奇数”

    我使用以下语法收到警告 my data variables Sno gt 5 0 ID gt 20 1 DBA gt 50 2 Address gt 80 3 Certificate gt 170 4 但在使用类似的语法时我没有收到类似的警
  • 将csv文件读取到“DataFrame”时如何指定索引的“dtype”?

    在 python 3 4 3 和 Pandas 0 16 中 如何指定dtype索引为str 以下代码是我尝试过的 In 1 from io import StringIO In 2 import pandas as pd In 3 imp
  • 设置 ItemIsMovable 标志时,子项在 QGraphicsView 中不可移动

    要调整项目中的项目QGraphicsView http qt project org doc qt 5 0 qtwidgets qgraphicsview html 我将表示顶点的子项放到要移动的项上 使用构造函数中建立的父子关系 就是下图
  • Ant JUnit ClassNotFoundException

    我意识到有很多类似的问题this one https stackoverflow com questions 10658636 new to ant classnotfoundexception with junit 但是在阅读了其中的大多
  • 键盘覆盖了 webapp 中的文本输入(iOS)

    我正在开发一个网络应用程序 屏幕下半部分有两个输入字段 父视图绝对定位于屏幕 通常 人们会假设单击输入字段时 焦点会强制输入进入键盘上方的视图 但是 键盘覆盖了输入字段 如果我开始打字 则该字段中不会输入任何内容 为了在字段中输入内容 我必
  • 匿名子类化 TimerTask 的正确方法是在 run 方法中保留对“this”的引用

    我子类化了TimerTask使用匿名 具体 类 这样 public void setTimedTask Note this implements an interface called UpdateIndicatorsReceiver fi
  • localStorage,使用toggleClass保存类

    我似乎对本地存储一无所知 我想通过切换类来设置一种最喜欢一组 div 中的任何 div 的方式 我可以让toggleClass在单个div上工作并保存 但localStorage将所有div保存为收藏夹 而不仅仅是设置了toggleClas
  • 选择子子项中的最新记录

    我有以下表格 列 Parent ParentID Child ChildID ParentID SubChild SubChildID ChildID Date Parent与 具有一对多关系Child Child与 具有一对多关系SubC
  • 在 ReactJS 环境中设置复选框样式

    我正在尝试设计一个复选框的样式ReactJSIE11 的环境 但似乎没有取得太大成功 有人可以建议吗 代码如下 CSS squared input type checkbox border radius 4px background ff0
  • 当鼠标位于 Qt 窗口的自定义小部件上时,如何移动整个窗口?

    假设我有一个自定义小部件并将其添加到 qt 的主窗口中 如您所见 红色区域是自定义小部件 我想要做的是 当鼠标在红色区域按下并移动时 整个窗口也会移动 我知道如何简单地实施mousePressEvent and mouseMoveEvent
  • python SMTP 未收到邮件

    你好 我正在尝试让 python 3 从 Ubuntu 发送一封简单的电子邮件 我启动了一个简单的 smtp 服务器 python m smtpd n c 调试服务器本地主机 1025 以下是我的电子邮件服务器的代码 import smtp
  • 我应该如何对长函数进行单元测试?

    如果我有一个很长的代码方法 它从 2 个或 3 个不同的源收集数据并返回结果 我如何重构它以使其更易于单元测试 该方法是一种网络服务 我想从客户端代码进行一次调用来收集所有数据 我可以将一些部分重构为更小的方法 这将更易于测试 但当前方法仍
  • ion-slide-box 更新问题