angularslideables reverse effect

Question

我正在使用AngularSlideables在Ionic項目中切換滑動模式。

這裏的工作小提琴：http://jsfiddle.net/3sVz8/19/

但我最初的高度是100％，而不是0像素，這意味着我要向上滑動前期。我怎樣才能做到這一點？請幫忙。

angular.module('angularSlideables', []) 
.directive('slideable', function() { 
    return { 
     restrict:'C', 
     compile: function (element, attr) { 
      // wrap tag 
      var contents = element.html(); 
      element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>'); 

      return function postLink(scope, element, attrs) { 
       // default properties 
       attrs.duration = (!attrs.duration) ? '1s' : attrs.duration; 
       attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing; 
       element.css({ 
        'overflow': 'hidden', 
        'height': '0px', 
        'transitionProperty': 'height', 
        'transitionDuration': attrs.duration, 
        'transitionTimingFunction': attrs.easing 
       }); 
      }; 
     } 
    }; 
}) 

.directive('slideToggle', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var target = document.querySelector(attrs.slideToggle); 
      attrs.expanded = false; 
      element.bind('click', function() { 
       var content = target.querySelector('.slideable_content'); 
       if(!attrs.expanded) { 
        content.style.border = '1px solid rgba(0,0,0,0)'; 
        var y = content.clientHeight; 
        content.style.border = 0; 
        target.style.height = y + 'px'; 
       } else { 
        target.style.height = '0px'; 
       } 
       attrs.expanded = !attrs.expanded; 
      }); 
     } 
    } 
}); 

Answer 1

你不能用百分比來做。你需要給它一個像素值。您還需要將attrs.expanded默認設置爲true。作出這些修改，它應該工作，你所希望的方式：

滑動指令：

'height': '200px', 

的slideToggle指令：

attrs.expanded = true; 

這裏有一個工作示例：http://jsfiddle.net/6msqfyyp/