0

angularjs と ionic フレームワークを使用してモバイル アプリを設計しています。感覚的な反応が重要なので、クリックしたアイテムを暗くする機能を実装することを考えました。つまり、アイテムの不透明度 1 -> ユーザーが画像をクリック -> アイテムの不透明度をたとえば 0.5 に設定 -> ユーザーを href アドレスにリダイレクトします。

これは、Angular/ionic フレームワークの方法でどのように実装する必要がありますか?

これはある程度機能するスニペットですが、50 ミリ秒の遅延が発生します。また、 preventDefault() と window.location.href は、おそらく使用するのに最適なものではありません ($location が機能しませんでした)。angular-animations/css を同じ効果に使用できますか? 個別の animate-click 属性が必要ないように、何らかの方法ですべてのリンクに課すことはできますか?

<a animate-click href="someaddress"><img src="somesrc"></a>

そしてディレクティブ

app.directive('animateClick', function() {
  return function(scope, element, attrs) {
    var clickingCallback = function(elem) {
      elem.preventDefault();
      element.css('opacity', 0.5);
      setTimeout(function() { 
        window.location.href = elem.target.href
      }, 50);
      return;
    };
    element.bind('click', clickingCallback);
  }
});
4

1 に答える 1

0

これを処理するためのディレクティブは必要ありません:

<a href="#" ng-click="dimMe = true" ng-class="{dimmed: dimMe}" ng-disabled="dimMe">
    <img src="http://lorempixel.com/100/100/"></a>

そしてあなたのCSSで：

.dimmed{ opactiy: 0.5; }

したがって、このリンクをクリックすると、dimMe が true に設定され、淡色表示されたクラスが追加され、リンクが無効になります。

作業用フィドルを追加

于 2014-04-01T15:51:21.627 に答える