Question

我有以下指令：

app.directive('showonhoverparent',
  function() {

    return {
      link : function(scope, element, attrs) {
        element.parent().bind('mouseenter', function() {
          console.log(attrs.showonhoverparent);
          element.fadeIn(attrs.showonhoverparent);
        });
        element.parent().bind('mouseleave', function() {
          element.fadeOut(attrs.showonhoverparent);
        });
      }
    };
  }
);

我在html中使用它：

<div class="img-text" showonhoverparent="2000">{{image.title}}</div>

或：

<div class="img-text" showonhoverparent="'slow'">{{image.title}}</div>

出于某种原因，无论我作为属性值传递什么，fadein / out speed id总是默认速度，好像没有传递给它的参数！任何想法为什么？

Answer 1

fadeIn / fadeOut检查参数的实际类型。

在第一种情况下，“2000”是一个字符串，因此它认为你传递的内容类似于“快”或“慢”，并且不会将其视为毫秒。

在第二种情况下，showonhoverparent="'slow'"中不需要单引号。引号包含在字符串中，并且无法与速度关键字匹配。

在指令中添加一个数字检查，它应该有用......

app.directive('showonhoverparent',
  function() {

    return {
      link : function(scope, element, attrs) {
        element.parent().bind('mouseenter', function() {
          console.log(attrs.showonhoverparent);
          element.fadeIn(getDuration(attrs.showonhoverparent));
        });
        element.parent().bind('mouseleave', function() {
          element.fadeOut(getDuration(attrs.showonhoverparent));
        });

        function getDuration (duration) {
          return (parseInt(duration, 10) > 0) ? parseInt(duration, 10) : duration;
        }
      }
    };
  }
);

Jsbin：http://jsbin.com/rofosibu/1/

jQuery fadeIn忽略传递给指令的duration参数

1 个答案: