3

.add-to-cart-btn <button>ここに商品、サイズ、価格などを表示しているこのオンライン ショップがあり、ボタンをクリックするたびに何らかのアニメーションが実行されるようにアニメーションを追加したいと考えています。次のような jQuery でこれを行うことができます。

$(document).ready(function() {
  $('.add-to-cart-btn').on('click', function() {
    $(this).addClass('bounce').delay(1000).removeClass('bounce');
  });
});

しかし、私は「Angular Way」をやろうとしており、近いと思います。ここに指令があります:この投稿のおかげで

angular.module('ForeverLeather').directive('animateTrigger', ['$animate', function ($animate) {

  return function (scope, elem, attrs) {
    elem.on('click', function (elem) {
      scope.$apply(function() {
        var el = angular.element(document.getElementsByClassName("add-to-cart-btn"));
        var promise = $animate.addClass(el, "bounce");
        promise.then(function () {
          scope.$apply(function() {
            $animate.removeClass(el, "bounce");
          });
        });
      });
    });
  }
}]);

HTML

  <div class="col-md-4 col-sm-6" ng-repeat="item in templateItems">

      <div class="product-img-wrapper">
        <img ng-src="{{item.src}}">
      </div>

      <h3 class="product-header">{{item.name}}</h3>
      <p class="lead product-text">
        {{item.description}}
      </p>

      <div class="product-btn-wrapper">
        <select ng-options="size.size as size.text for size in item.sizes" ng-model="item.selectedItem.size"
                class="form-control" ng-change="getPrice(item, item.selectedItem.size)">
          <option value="" disabled>-- Select to view prices --</option>
        </select>
        <span class="text-left product-price">{{item.selectedItem.price | currency}}</span>
        <button ng-click="addToCart(item.type, item.name, item.selectedItem.size);" 
                class="btn btn-lg btn-success add-to-cart-btn animated" animate-trigger>
          <i class="fa fa-cart-plus"></i>&nbsp; Add To Cart
        </button>
      </div>

    </div>

これは機能します..まあ、私の問題は、 var el = angular.element(document.getElementsByClassName("add-to-cart-btn"));このクラス名を持つページの最初のボタンを常に見つけることです。これを次のように変更する必要があります。

var el = angular.element(elem); // invalid
var el = angular.element(this); // invalid

ページの最初の要素ではなく、現在クリックされている要素でアニメーションを実行するようにします。

4

2 に答える 2

4

しかし、あなたはすでに要素を持っています。必要なのは

return function (scope, elem, attrs) {
    elem.on('click', function () {
      scope.$apply(function() {
        var promise = $animate.addClass(elem, "bounce");
        promise.then(function () {
          scope.$apply(function() {
            $animate.removeClass(elem, "bounce");
          });
        });
      });
    });
  }
于 2015-07-05T03:44:12.960 に答える
2

AngularJS のアニメーションは、別の方法で使用されることを意図しています。

アニメーションイベントは4種類

  • 入力
  • 離れる
  • 動く
  • クラスの追加/削除

JavaScript を使用して「Angular の方法」で実行したい場合は、これらのイベントにフックする必要があります。

この場合にターゲットにしたいのは、次のようなボタンです。

(ドキュメントから: https://docs.angularjs.org/api/ngAnimate )

myModule.animation('.slide', [function() {
  return {
    // make note that other events (like addClass/removeClass)
    // have different function input parameters
    enter: function(element, doneFn) {
      jQuery(element).fadeIn(1000, doneFn);

      // remember to call doneFn so that angular
      // knows that the animation has concluded
    },

    move: function(element, doneFn) {
      jQuery(element).fadeIn(1000, doneFn);
    },

    leave: function(element, doneFn) {
      jQuery(element).fadeOut(1000, doneFn);
    }
  }
}]

クリックしてイベントにフックするには、 、enter、leaveおよびmoveはあまり役に立ちません。あなたが望むのは、クリックイベントでクラス名を追加または削除することです。さまざまな方法でクラスを追加できますが、1 つの例を次に示します。

<button ng-class="{'my-animation':model.animationOn}" ng-click="model.animationOn=true">My Button Text</button>

ただし、ある時点でクラスを削除する必要があります。最も適切な時間は、おそらく、Angular のアニメーション API を使用したそのイベントのコールバックにあります。このようなもの：

myModule.animation('.my-btn', [function() {
  return {
    addClass: function(element, className, doneFn) {
      if(className == 'my-animation') {
        jQuery(element).fadeIn(1000, function() {
          doneFn(); // always call this when you're done
          element.removeClass('my-btn');
        });
      }
    }
  }
}]

また、Angular が JavaScript でクラスを追加および削除したことを認識するためには、Angular に同梱されているディレクティブのいずれかを使用するか、Angular で$animateサービスを使用する必要があります。最初のコード例では、jQuery を使用してクラスを追加していますが、Angular はそれを認識しません。

于 2015-07-05T03:43:51.427 に答える