在移动设备上使用angularjs tap事件

Question

我在我的角度应用中悬停时使用翻转动画。这是指令代码

appDirectives.directive("flip", function(){

  function setDim(element, width, height){
    element.style.width = width;
    element.style.height = height;
  }

  var cssString =
    "<style> \
    .flip {float: left; overflow: hidden} \
    .flipBasic { \
    position: absolute; \
    -webkit-backface-visibility: hidden; \
    backface-visibility: hidden; \
    transition: -webkit-transform .8s; \
    transition: transform .8s; \
    -webkit-transform: perspective( 800px ) rotateY( 0deg ); \
    transform: perspective( 800px ) rotateY( 0deg ); \
    } \
    .flipHideBack { \
    -webkit-transform:  perspective(800px) rotateY( 180deg ); \
    transform:  perspective(800px) rotateY( 180deg ); \
    } \
    .flipHideFront { \
    -webkit-transform:  perspective(800px) rotateY( -180deg ); \
    transform:  perspective(800px) rotateY( -180deg ); \
    } \
    </style> \
    ";

  document.head.insertAdjacentHTML("beforeend", cssString);


  return {
    restrict : "AE",
    controller: function($scope, $element, $attrs){

      var self = this;
      self.front = null,
      self.back = null;


      function showFront(){
        self.front.removeClass("flipHideFront");
        self.back.addClass("flipHideBack");

      }

      function showBack(){
        self.back.removeClass("flipHideBack");
        self.front.addClass("flipHideFront");
      }

      self.init = function(){
        self.front.addClass("flipBasic");
        self.back.addClass("flipBasic");

        showFront();
        self.front.on("mouseenter", showBack);
self.front.on("mouseleave", showFront);
self.back.on("mouseenter", showBack);
self.back.on("mouseleave", showFront);








      }

    },

    link : function(scope,element,attrs, ctrl){

      var width = attrs.flipWidth || "100%",
        height =  attrs.flipHeight || "100%";

      element.addClass("flip");

      if(ctrl.front && ctrl.back){
        [element, ctrl.front, ctrl.back].forEach(function(el){
          setDim(el[0], width, height);
        });
        ctrl.init();
      }
      else {
        console.error("FLIP: 2 panels required.");
      }

    }
  }

});

appDirectives.directive("flipPanel", function(){
  return {
    restrict : "AE",
    require : "^flip",
    //transclusion : true,
    link: function(scope, element, attrs, flipCtr){
      if(!flipCtr.front) {flipCtr.front = element;}
      else if(!flipCtr.back) {flipCtr.back = element;}
      else {
        console.error("FLIP: Too many panels.");
      }
    }
  }
});

这是html代码

<flip>
      <flip-panel style="background: #212121;">
     <a data-ui-sref="app.page({ page: 'scan', child: null })"><span>{{post.id}}</span></a>
     </flip-panel>
     <flip-panel style="background-color:#cf402d!important;
        background-image: url(./img/active-table.png)!important;
    background-repeat: no-repeat!important;
    background-position: center!important;">
        <a data-ui-sref="app.page({ page: 'scan', child: null })"><span>{{post.id}}</span></a>
      </flip-panel>
    </flip>

此代码在悬停时工作正常。但现在我希望它可以在智能设备上触摸。当我第一次点击时它会翻转，然后在第二次点击时它会转到链接。