jQuery를 fadeIn는 지침에 전달 기간 매개 변수를 무시

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 속도 ID는 항상 매개 변수가없는 것처럼 기본 속도입니다. r은 그것에 전달된다! 왜 어떤 아이디어?

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/