Javascript內templateUrl離子彈出

我想製作一些自定義的離子彈出式窗口，用戶可以點擊其中的一個圖片（替換一個常用的單選按鈕）。要做到這一點，我需要一個JavaScript來檢查哪個圖像被點擊。我不知道把這個JavaScript代碼放在哪裏。在HTML代碼裏面不起作用。下面是引用templateUrl HTML文件：Javascript內templateUrl離子彈出

<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>

來源

2016-05-22 Thiago Braga

角/離子將無法編譯腳本。使用自定義指令或「ng-click」對此 – charlietfl

離子在AngularJS開發的，所以你應該使用AngularJS和jQuery的不是這個。

這裏是例子，希望你會有想法。代碼在離子2中，但它與離子1相似（你沒有寫出你使用的是哪個版本）。

首先，在您的控制器添加新方法，將圖像點擊被稱爲：

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

然後使用單擊模板中的圖像的指令：

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

我希望這有助於。

來源

2016-05-23 09:08:38

在你相應的控制器，定義資源模板需要：

$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"/>

來源

2016-05-23 09:12:34 liuwenzhuang

是的！謝謝！！ –

Javascript內templateUrl離子彈出

回答

相關問題