2017-02-21 12 views
0

私は以下の簡単なコードをイオン1に入れました。それはitensの単なるリストです。リストはクリック可能で、クリックすると詳細ページに移動します。しかし、私が正しい電話アイコンをクリックすると、その人に電話したいと思います。Ionic:ui-sref要素の内部でng-hrefリンクを作成するにはどうすればよいですか?

問題は、アイコン(ng-href属性)のリンクが無視されていることです。 ui-sref属性を削除すると動作します。

誰かが私にこの仕事をする方法を説明できますか?私に問題を説明すればボーナスポイント。

<ion-item class="item-icon-right" 
     ng-repeat="e in search(text)" 
     ui-sref="page2({m:e.mat})"> 
    <h2positive>{{e.name}} 
     <a ng-href="tel:+5521{{e.phone}}" 
     class="icon ion-iphone enable-pointer-events" 
     style="text-decoration: none;"></a> 
    </h2positive> 
    </ion-item> 

確かに私はアイテムを分割することができますが、すべてのCSSの書式設定を混乱させるでしょう。私はe.phoneリンクを動作させるために何かを変えたいと思っています。

答えて

2

タグion-stop-event="click"を使用するだけです。実際には文書化されていませんが、電話アイコンのクリックイベントが外側のdivに「バブルアップ」しないようにします。コメントを

<ion-item class="item-icon-right" 
    ng-repeat="e in search(text)" 
    ui-sref="page2({m:e.mat})"> 
<h2positive>{{e.name}} 
    <a ng-href="tel:+5521{{e.phone}}" 
    ion-stop-event="click" 
    class="icon ion-iphone enable-pointer-events" 
    style="text-decoration: none;"></a> 
</h2positive> 

1

これは動作するはずです:

<ion-item class="item-icon-right" ng-repeat="e in search(text)"> 
    <h2positive ui-sref="page2({m:e.mat})">{{e.name}}</h2positive> 
    <a ng-href="tel:+5521{{e.phone}}" 
    class="icon ion-iphone enable-pointer-events" 
    style="text-decoration: none;"></a> 
</ion-item> 

を今すぐ問題がui-srefでは、これだけUI-SREFが働いていたng-hrefを重ねました。

これらを別々の重複しない要素に分けると、問題が解決するはずですが、クラスのスタイリングを変更する必要があります。

+0

おかげで、しかし、問題は本当に台無しにCSSフォーマットである:ここで作業コードです。私はそれを明示的に変更しました。 – neves

関連する問題