在指令中使用jquery滑动元素onhover

Question

鉴于以下html和js，我无法弄清楚如何让我的元素在悬停时显示。

项目行，我的模板文件

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h1>Projects</h1>
      <div class="projects-body">
        <div class="row" ng-repeat="project in projects">
          <div class="col-lg-4" ng-repeat="p in project">
            <div id="project-item-{{$index}}" class="thumbnail project-item" >
              <img src="{{p.img}}"></img>
              <div class="project-caption" slidetoggle ng-hide="true">
                {{p.short_desc}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我的切换.project-caption指令

app.directive('slidetoggle', function(){
  return {
    link: function(scope, element, attrs){

      element.parent().bind('mouseenter', function(){
        console.log('mouseenter parent:',  element.parent());
        element.show();
      });

      element.parent().bind('mouseleave', function(){
        console.log('mouseleave:', element);
        element.hide();
      });
    }
  };
});

当我鼠标输入该元素时，我得到element.hide()和element.show()

的以下未定义

Answer 1

你有两个问题。首先，您需要显示和隐藏jQuery对象。将您的陈述改为：

$(element).show();
$(element).hide();

然后，ng-hide重写jQuery（或jQlite，视情况而定）。使用jQlite / jQuery（使用display属性）或使用ng-hide，这会添加麻烦的!important修饰符，但不能同时添加两者。

<强> Demo