Question

我想制作一个自定义离子Popup，其中包含一些用户可以在其中一个中点击的图像（替换常用的radiobutton）。要做到这一点，我需要一个JavaScript来检查点击了哪个图像。我不知道在哪里放这个javascript代码。在html代码里面没有用。这是templateUrl引用的html文件：

<div class="row">
   <img id="0" src="img/0.png" width="30" height="30" style="opacity:0.5;margin:5px;"/>
   <img id="1" src="img/1.png" width="30" height="30" style="opacity:0.5;margin:5px;"/>
   <img id="2" src="img/2.png" width="30" height="30" style="opacity:0.5;margin:5px;"/>
   <img id="3" src="img/3.png" width="30" height="30" style="opacity:0.5;margin:5px;"/>
   <img id="4" src="img/4.png" width="30" height="30" style="opacity:0.5;margin:5px;"/>
   <img id="5" src="img/5.png" width="30" height="30" style="opacity:0.5;margin:5px;"/>
</div>
Algum Comentário?<br>
<input type="text"/>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $('#0').on("click", function(){
    console.log(this);
});
</script>

Answer 1

Ionic是在AngularJS中开发的，所以你应该使用AngularJS而不是jQuery。

这是一个例子，希望你会有所了解。代码是离子2，但它与离子1相似（你没有写过你使用的是哪个版本）。

首先，在您的控制器中添加将在图像点击时调用的新方法：

imageSelected(index) {
    console.log(index);
}

然后在模板内的图像上使用click指令：

<div class="row">
   <img src="img/0.png" (click)="imageSelected(1)" />
   <img src="img/1.png" (click)="imageSelected(2)" />
   ...
</div>

我希望这会有所帮助。

Answer 2

在相应的控制器中，定义模板所需的资源：

$scope.imgIds = ['0', '1', '2', '3', '4', '5'];
$scope.onImgClick(imgId) {
  // suit yourself
}

在您的模板中，删除脚本代码：

<div class='row'>
  <img ng-repeat='imgId in imgIds' id='imgId' ng-src="img/{{imgId}}.png" ng-click="onImgClick(imgId)" width="30" height="30" style="opacity:0.5;margin:5px;">
</div>
Algum Comentário?<br>
<input type="text"/>

离线弹出窗口中的templateUrl内的Javascript

2 个答案: